Maison > interface Web > tutoriel CSS > Conflit CSS dans React

Conflit CSS dans React

WBOY
Libérer: 2024-08-29 15:06:04
original
747 Les gens l'ont consulté

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.

CSS conflict in React

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

CSS conflict in React

La feuille de style respective est - RedContainer.css

CSS conflict in React

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

CSS conflict in React

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

CSS conflict in React

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.

CSS conflict in React

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 des "styles" à partir de ces fichiers.

CSS conflict in React

Importation des styles dans leurs composants respectifs. Pour RedContainer -

CSS conflict in React

Pour le GreenContainer

CSS conflict in React

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 -

CSS conflict in 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.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

source:dev.to
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal