Styles en Ligne en Pratique

Créons un composant Notification polyvalent qui affiche du texte et change dynamiquement la propriété background-color en fonction de la prop behavior. Nous procéderons à l'implémentation étape par étape.

Étape 1

Nous commençons par créer le composant parent, App, ainsi que le composant enfant, Notification, en utilisant la structure de base de React.

Étape 2

Pour fournir un style par défaut au composant Notification, nous créons un objet appelé notificationStyles et attribuons les propriétés suivantes : padding avec la valeur "20px"; fontSize avec la valeur "24px"; color avec la valeur "aquamarine";

Attribuons l'objet notificationStyles comme valeur à l'attribut style du composant Notification component, qui est appliqué à l'élément p retourné.

Étape 3

Dans le composant App, nous pouvons utiliser le composant Notification en passant la prop behavior et la prop text. La prop behavior détermine l'apparence de la notification, tandis que la prop text spécifie le texte à afficher dans la notification.

Étape 4

Nous pouvons implémenter la logique pour colorer l'arrière-plan de chaque message de notification en fonction de la prop behavior de la manière suivante :

• Si la valeur de behavior est "positive", la couleur de fond doit être définie sur green;
• Si la valeur de behavior est "negative", la couleur de fond doit être définie sur red;
• Si la valeur de behavior est "neutral", la couleur de fond doit être définie sur blue.

Nous pouvons créer une fonction pour gérer la logique en utilisant l'instruction switch de JavaScript. Voici un exemple de comment cela peut être implémenté :

Cette fonction prend la prop behavior comme argument et retourne la couleur de fond correspondante en fonction de la valeur en utilisant l'instruction switch. La prop behavior retournera une couleur de fond transparent si elle ne correspond pas aux cas spécifiés.

Incorporons cette fonction dans l'objet de style du composant :

Nous utilisons les conventions JavaScript pour assurer la structure appropriée de l'objet de style. Tout d'abord, nous étendons l'objet notificationStyles existant. Ensuite, nous introduisons une propriété supplémentaire, backgroundColor, dont la valeur est dérivée de la chaîne retournée par la fonction setBackgroundColor.

Code complet de l'application :