L'interface utilisateur est la première étape avant de commencer à taper la logique pour compléter notre front-end. Nous écrivons donc le balisage suivi des styles essentiels requis pour obtenir l'interface utilisateur souhaitée. Lors de l'écriture du balisage, nous devons créer des noms de classe significatifs pour adresser et accéder à la balise HTML et y ajouter du style. Avec une interface utilisateur simple et des balises distinctes, nous pouvons le faire plus ou moins facilement. Lors de l’écriture d’une interface utilisateur répétitive et complexe, donner des noms significatifs et distincts devient un désastre car il n’existe que quelques noms génériques. Nous créons donc des composants et des feuilles de style pour les composants individuels. Comme indiqué ci-dessous.

Nous pouvons voir que deux composants, GreenContainer et RedContainer, sont importés dans App.js à partir du dossier des composants dans src. Leurs feuilles de style respectives sont RedContainer.css et GreenContainer.css, qui sont importées depuis le dossier styles. Examinons les composants et leurs feuilles de style un par un.

Le premier composant, RedContainer.jsx

La feuille de style respective est - RedContainer.css

Jetez maintenant un œil au deuxième composant, GreenContainer.js -

Fichier CSS pour le deuxième composant, GreenContainer.css

Les deux feuilles de style contiennent des propriétés CSS distinctes pour leurs composants respectifs. Ainsi, le résultat attendu de l'interface utilisateur peut être un écran contenant deux blocs, l'un est un carré rouge avec des bras de 150 px et l'autre est un carré vert avec des bras de 200 px. Jetons un coup d'œil à l'application React rendue.

Pourquoi cela se produit-il ? Les propriétés CSS du dernier conteneur ont été appliquées aux deux conteneurs. Mais comment ? La réponse est juste avant le rendu de l'application React, toutes les feuilles de style sont compilées dans un seul fichier CSS, où se trouvent deux sélecteurs de classe portant le même nom - ".container" et c'est pourquoi les propriétés CSS du dernier ".container{ }" ont été appliqués à tous les conteneurs dans le monde. Ce problème peut être résolu en utilisant des modules CSS. Les modules CSS sont des fichiers CSS dans lesquels tous les noms de classe sont définis localement par défaut. Cela nous aide des manières suivantes

1) La localisation des styles sur des composants spécifiques évite ce conflit de portée globale.

2) Autoriser l'utilisation des mêmes noms de classe dans différents modules et promouvoir le style modulaire.

Pour utiliser le style modulaire, nous devons remplacer ".css" par ".module.css" et importer les "styles" à partir de ces fichiers.

Importation des styles dans leurs composants respectifs. Pour RedContainer -

Pour le GreenContainer

En général, nous écrivons className sous forme de chaîne comme celle-ci, si le className est "container", nous écrirons className = "container". Pour les modules CSS, nous écrirons le nom de la classe comme ceci className = {styles.container} dans les fichiers jsx. Voyons maintenant le rendu de l'application React -

Il n'y a désormais aucun problème de conflit CSS et les styles sont appliqués aux composants respectifs de manière appropriée.