Renforcez votre conception Web avec JavaScript Magic / Blogs / Perficient

Le style joue un rôle fondamental dans le développement Web. De plus, lorsque vous vous lancez dans la création d’applications React, vous pouvez choisir parmi différentes approches pour gérer habilement les styles et le CSS. Ce guide complet explorera diverses techniques, outils et bonnes pratiques pour styliser les composants React à l’aide de JavaScript.

Différentes approches du style dans React

Dans le vaste domaine du développement React, les développeurs peuvent choisir parmi un large éventail d’approches pour appliquer des styles et gérer efficacement CSS.

1. Styles en ligne :

• L’une des approches les plus simples consiste à utiliser des styles en ligne directement dans les composants React.
• Les objets JavaScript appliquent des styles, fournissant un style unique et encapsulé pour chaque composant.
  

2. Feuilles de style CSS :

• Les feuilles de style CSS traditionnelles peuvent également être utilisées dans les applications React.
• Importez la feuille de style dans votre fichier de composant et appliquez les noms de classe comme d’habitude.
• Créez un fichier CSS distinct contenant les styles de votre composant. Par exemple, appelons-le. App.css.
• Dans votre fichier de composant React (par exemple, MonComponentFonctionnel.js), importez le fichier CSS à l’aide du importer déclaration.

3. Modules CSS :

• Les modules CSS offrent un moyen de définir localement vos styles en générant automatiquement des noms de classe uniques.
• React traite chaque fichier CSS comme un module distinct et le composant importe des classes avec des fonctionnalités étendues.
• Exemple : créez un fichier module.CSS distinct contenant les styles de votre composant. Par exemple, appelons-le.

• Dans votre fichier de composant React, importez les styles à l’aide d’une instruction d’importation standard. L’objet importé contient les noms de classe de portée locale en tant que propriétés.

• Avantages des modules CSS :

1. 1. 1. Portée locale : Les styles sont limités localement au composant, ce qui réduit les risques de conflits de noms dans les projets plus importants.
      2. Maintenabilité : Les styles et les composants sont colocalisés, ce qui facilite la maintenance et la compréhension de la logique de style d’un composant spécifique.
      3. Dépendances explicites : Les composants importent explicitement uniquement les styles dont ils ont besoin, évitant ainsi la pollution à l’échelle mondiale.

4. Bibliothèques CSS-in-JS :

• Les bibliothèques Styled Components, Emotion et JSS permettent d’écrire du CSS directement dans vos fichiers JavaScript.
• Ces bibliothèques offrent souvent des fonctionnalités telles que le style dynamique, la création de thèmes et une intégration facile avec React.
• Exemple d’utilisation de composants stylisés : vous devez l’installer dans votre projet avant de l’utiliser. Vous pouvez y parvenir en utilisant un gestionnaire de packages tel que npm ou Yarn.
• Créez un composant stylisé directement dans votre fichier React. Appelons-le MyStyledComponent.js :
• Dans cet exemple, nous utilisons le stylisé fonction à partir des composants stylisés pour créer un nouveau composant stylisé (StyleDiv). Les styles sont définis dans un modèle littéral et le résultat StyleDiv Le composant peut être utilisé comme n’importe quel autre composant React.
• Vous pouvez désormais importer et utiliser votre composant stylisé dans un autre fichier React. Appelons-le App.js:
• Dans cet exemple, MonComposantStyled est importé et utilisé dans le Application composant. Les styles définis dans StyleDiv sera appliqué à la div élément rendu par MonComposantStyled.

• Avantages des composants stylisés :

  1. Style basé sur les composants : Les composants stylisés s’alignent sur la nature basée sur les composants de React, encapsulant les styles dans chaque composant.
  2. Style dynamique : Adaptez facilement les styles en fonction de l’état des composants ou des accessoires, améliorant ainsi les interfaces utilisateur dynamiques.
  3. Thématisation : Les composants stylisés prennent en charge les thèmes, vous permettant de créer un système de conception cohérent.
  4. Aucune collision de noms de classe : Les noms de classe générés sont uniques, éliminant ainsi le risque de conflits de noms.

5. Bibliothèque clsx :

• clsx est conçu pour faciliter l’application conditionnelle des classes CSS dans les composants React.
• Il s’agit d’une bibliothèque légère qui ajoute une surcharge minimale à votre projet tout en offrant des fonctionnalités puissantes.
• L’objectif principal de clsx est d’améliorer la lisibilité du code en simplifiant la concaténation des noms de classe de manière concise et claire.
• Exemple utilisant clsx : Avant d’utiliser ‘clsx’, vous devez l’installer dans votre projet. Vous pouvez y parvenir en utilisant un gestionnaire de packages tel que npm ou Yarn.
• Maintenant, importez clsx dans votre composant React, utilisez clsx pour composer conditionnellement des noms de classe :
• Dans cet exemple, définissez le composant Button comme un composant fonctionnel qui prend deux accessoires : isPrimary et isSecondary. Appelez la fonction clsx avec un objet où les clés représentent les noms de classe et les valeurs sont des expressions booléennes. Si estPrimaire est vrai, la classe ‘primary-button’ est incluse ; si estSecondaire est vrai, la classe ‘secondary-button’ est incluse. La classe ‘default-button’ est incluse si aucune des deux n’est vraie (!isPrimary && !isSecondary).
• Le résultat (ButtonClasses) est une chaîne contenant les noms de classes combinés en fonction des conditions.
• Dans cet exemple, le Bouton Le composant peut être utilisé dans un composant parent (Application), et les noms de classe appliqués à chaque bouton rendu dépendront des accessoires fournis (estPrimaire et estSecondaire). L’utilisation de clsx rend la composition de la classe plus concise et lisible.

Conclusion

Dans le style React, il existe de nombreuses façons de procéder. Que vous préfériez les styles directement dans les composants, utilisiez des modules CSS ou essayiez les bibliothèques CSS-in-JS, le choix dépend des besoins de votre projet et des préférences de votre équipe. Expérimenter différentes techniques permet de créer des applications React attrayantes et faciles à gérer. Qu’il s’agisse de rester simple avec des styles en ligne ou d’opter pour des bibliothèques CSS-in-JS sophistiquées, chaque méthode contribue à créer des interfaces sympas et conviviales. Bon codage !