Bonjour, Habr! Je vous présente la traduction de l'article
«4 façons de styliser les composants React» .
À ce jour, de nombreuses façons de styliser les composants React ont été développées. Des bibliothèques à l'utilisation de fichiers CSS traditionnels. Le choix est assez vaste et dépendra très probablement de vos préférences. Voici quatre façons de styliser les composants React.
CSS en ligne
Étant donné que JSX est converti en éléments HTML, cela vous permet d'utiliser l'attribut style. Les styles peuvent être appliqués aux éléments en leur passant simplement un objet avec des propriétés. Cela ressemblera à ceci:
Cependant, cette méthode est très limitée. Il ne peut pas utiliser de pseudo-sélecteurs, tels que: survoler, ainsi que les requêtes multimédias. Mais cela ne signifie pas qu'il ne doit pas être utilisé. Il peut être utilisé lorsqu'il n'y a que 2 ou 3 propriétés qui ne nécessitent pas de pseudo-sélecteurs ou de requêtes multimédias et / ou dans des situations où l'utilisation de conditions dans les styles est requise.
Bibliothèques de style
J'aime simplement apprendre de nouvelles bibliothèques ou de nouveaux frameworks. Cette méthode est ma préférée pour styler les composants React. Il existe de nombreuses bibliothèques de styles qui vous permettent non seulement de styliser des composants, mais également de fournir des «super fonctionnalités» supplémentaires, comme je les appelle, ainsi que toutes les fonctionnalités CSS qui facilitent les choses.
Un exemple d'utilisation pourrait ressembler à ceci:
Ce qui précède est un exemple d'utilisation de la bibliothèque de composants de style.
Wrapper est appelé un composant stylisé. Les styles sont définis dans la constante Wrapper, qui crée simplement un composant avec ces styles. Déterminez simplement le type d'élément dont vous avez besoin, par exemple: div, header ou img, et utilisez-le comme s'il s'agissait d'un composant React. Pas des éléments HTML, juste des composants, ce qui rend le code plus propre et plus facile à lire.
C'est juste ma préférence. Peut-être que vous aimez utiliser un div ou voir des éléments HTML natifs. Pas de problème! Khan Academy a développé la bibliothèque Aphrodite, qui utilise des éléments HTML mais attache des styles au composant à l'aide de l'attribut className.
Mon article sur AphroditeCes bibliothèques ont également de nombreuses fonctionnalités supplémentaires qui vous permettent de faire des choses impressionnantes. Il existe de nombreuses bibliothèques, il vous suffit donc d'essayer de voir laquelle restera avec vous.
Voici les deux plus populaires en ce moment:
https://www.styled-components.com/https://glamorous.rocks/Styles externes
Vous pouvez écrire des styles dans un fichier CSS externe et les importer dans le composant si nécessaire. C'était probablement la première méthode que vous avez apprise lorsque vous avez commencé à apprendre React. Cependant, lors de l'ajout d'éléments supplémentaires, il est difficile de les nommer. Tous les styles ont une portée globale. Par exemple, vous avez créé deux éléments portant le même nom par vous ou votre coéquipier, auquel cas vous pouvez rencontrer ce problème.
Modules CSS
Les modules CSS sont très similaires à l'écriture CSS dans des fichiers externes. La seule différence est que les styles sont encapsulés, contrairement à l'utilisation traditionnelle des fichiers CSS externes. Cela signifie que les styles n'entreront pas en conflit ni ne se remplaceront les uns les autres. Vous utilisez les mêmes méthodes que celles utilisées dans le CSS traditionnel. Il permet également d'utiliser toutes les bonnes méthodologies, telles que BEM. Vous pouvez en savoir plus ici:
https://github.com/css-modules/css-modulesPour que vous ne décidiez pas d'utiliser: CSS traditionnels, modules CSS, CSS en ligne, bibliothèques de style, ou une combinaison de ces méthodes, à mon avis, tout se résume à vos préférences et aux préférences de votre équipe.
Merci d'avoir lu. Vous avez trouvé une erreur? N'hésitez pas à me parler d'elle. Passez une bonne journée!