Comment puis-je obtenir du CSS à l'échelle des composants dans React ?

Importations CSS à l'échelle des composants dans React

L'importation de feuilles de style CSS dans les composants React peut présenter des défis lorsque l'on vise un style spécifique aux composants. Par défaut, les importations CSS deviennent globales, affectant tous les éléments de l'application. Cependant, il est possible d'obtenir une isolation CSS à l'échelle des composants.

Comprendre l'importation CSS dans React

Traditionnellement, comme l'illustre la question, l'importation de CSS dans React via le L'instruction import injecte les styles dans le fichier

section du document HTML. Cette approche rend le CSS accessible à l'échelle mondiale, ce qui entraîne des conflits et une spécificité excessive.

Solutions CSS à l'échelle des composants

Une solution efficace pour les CSS à l'échelle des composants consiste à utiliser CSS Modules. Cette technique encapsule le CSS dans le répertoire du composant, où les noms de classe sont de portée locale et générés de manière unique pour chaque composant.

Implémentation des modules CSS

Pour implémenter les modules CSS :

1. Créez un fichier CSS dans le répertoire du composant (par exemple, nom-du-composant/style.css)
2. Importez le fichier CSS à l'aide de la syntaxe JavaScript ES6 (par exemple, importez les styles depuis './nom-du-composant/style.css';)
3. Utilisez le fichier importé objet de style dans la méthode de rendu du composant pour appliquer des styles aux éléments (par exemple, className={styles.className})

Approches alternatives

Si les modules CSS ne sont pas préférés, envisagez d'adhérer à une convention de dénomination cohérente pour les styles de composants et d'éléments , en évitant les sélecteurs génériques comme p et code. En adoptant une approche de type BEM (par exemple, .component-name__element-name), vous pouvez garantir l'unicité et éviter les conflits de style.

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!