Comment obtenir du CSS à l'échelle des composants dans les applications React ?

Comment implémenter du CSS à l'échelle des composants dans React

Dans React, il est courant d'importer des fichiers CSS dans des composants pour styliser leurs éléments. Cependant, il est essentiel de s'assurer que ces styles CSS sont étendus au composant lui-même, évitant ainsi les conflits avec les styles d'autres composants.

Comprendre le problème

Par défaut, l'importation Les fichiers CSS dans les composants React rendent leurs styles globaux, ce qui signifie qu'ils s'appliquent à tous les composants de l'application. Cela peut entraîner des conflits de style indésirables et des difficultés à maintenir un style cohérent.

Solution : modules CSS

Les modules CSS sont une technique qui fournit du CSS à l'échelle des composants. Il attribue des valeurs de hachage uniques et aléatoires aux classes CSS générées pour chaque composant. Cela garantit que les styles sont appliqués uniquement aux éléments du composant dans lequel le fichier CSS est importé.

Exemple :

Considérez la structure de composant suivante :

About/style.css:
.AboutContainer {
  # Some style
}
p > code {
  # Some style
}

About/index.js:
import './style.css';

// Component definition...

L'importation du fichier CSS comme indiqué ci-dessus entraîne l'application du CSS à tous les composants du application.

Solution utilisant des modules CSS :

Pour que le composant CSS soit étendu, mettez à jour le code comme suit :

import styles from './style.css';

// Component definition...

Cela garantit que les styles sont uniques au composant À propos et n'affecteront pas les autres composants.

Approche alternative : basée sur les classes Style

Une alternative aux modules CSS consiste à adopter une convention de dénomination basée sur les classes pour les composants et leurs éléments. Par exemple, au lieu d'utiliser des sélecteurs génériques (p, code), utilisez des noms de classe spécifiques :

.aboutContainer {
  # Some style
}
.aboutContainer__code {
  # Some style
}

Cette méthode permet également d'éviter les conflits de style en garantissant que les styles sont appliqués uniquement aux éléments du composant prévu.

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!