React - 6.6 Styles dynamiques avec les accessoires

Les composants stylisés peuvent recevoir des accessoires, appelés props, qui modifient leur apparence. Cette leçon crée un champ de formulaire stylisé dans son propre fichier. Un accessoire invalide change la bordure, le fond et la couleur du texte.

Créer le composant de formulaire

Jusqu'ici, chaque composant était dans un fichier séparé. C'est une bonne règle à garder. Le contrôle du formulaire reçoit donc son propre fichier.

Le style du champ et celui du label sont copiés depuis le fichier CSS précédent, puis adaptés avec styled.div, styled.input et styled.label. Le champ de saisie reste dans le composant, avec sa propre apparence.

Utiliser un accessoire pour le style

Une fonction fléchée reçoit les accessoires du composant. Elle renvoie la valeur de style à appliquer. Si l'accessoire invalide est vrai, la couleur passe au rouge. Sinon, elle prend une autre valeur.

La bordure du champ suit le même principe avec l'accessoire invalide. Le fond du champ est défini en transparent, ce qui laisse la teinte venir du fond du formulaire.

const Label = styled.label`
  color: ${(props) => (props.invalide ? 'red' : 'black')};
`;

Utiliser l'accessoire dans le formulaire

Le composant reçoit l'accessoire invalide lorsque la saisie n'est pas valide. Quand la saisie est valide, l'accessoire vaut faux, et le label reprend la couleur noire.

Le résultat est le même qu'avec les classes CSS, mais le style reste dans le composant. L'auteur présente cette approche comme une autre façon d'intégrer le style à React.

En résumé

Un composant stylisé peut recevoir un accessoire comme invalide. Une fonction fléchée choisit alors la couleur à appliquer. Le style change selon l'état de la saisie, sans classe CSS séparée.

Points clés

• Les accessoires, ou props, modifient l'apparence d'un composant stylisé.
• Une fonction fléchée reçoit les props et renvoie la valeur de style.
• Le label passe en rouge si la saisie est invalide, et en noir sinon.
• Chaque composant garde son fichier et son style.
• Le fond transparent est défini directement dans le composant.

Questions fréquentes

Qu'est-ce qu'un accessoire, ou prop ?

C'est une valeur transmise à un composant pour modifier son comportement ou son apparence. Ici, invalide change le style.

Pourquoi utiliser une fonction fléchée dans le style ?

Elle permet de calculer la valeur de style à partir des accessoires reçus. La couleur dépend ainsi de l'état du champ.

Quelle est la différence avec les classes CSS ?

Le style reste dans le composant, au lieu d'être dans un fichier CSS séparé. Le résultat visuel reste le même.