Comment puis-je obtenir du CSS à l'échelle des composants dans React pour éviter les conflits de style ?

Portée CSS dans les composants React

Le problème

Dans les applications React utilisant ES6, des fichiers CSS distincts peuvent être importés dans les composants. Cependant, lorsqu'il est importé de cette manière, le CSS est souvent rendu globalement, affectant tous les composants. Cela peut entraîner des conflits CSS et un style involontaire.

CSS à l'échelle des composants

Le comportement souhaité est que le CSS soit étendu à des composants individuels, garantissant que les styles ne sont appliqués que dans la portée de ce composant. Cela signifie que le style doit être « local » par rapport au composant, et disparaître lorsque le composant est démonté.

Solution

Pour obtenir un CSS à l'échelle du composant, envisagez d'utiliser des modules CSS ou un CSS-in similaire. -Paquets JS. Les exemples incluent Emotion, les composants stylisés ou les packages du vaste catalogue de npm.

Les modules CSS, par exemple, fournissent un mécanisme permettant de définir localement les noms de classe et les noms d'animation. Les URL et les importations sont gérées au format de demande de module.

Exemple avec les modules CSS

import React from 'react';
import styles from './styles/button.css';

class Button extends React.Component {
  render() {
    return (
      <button className={styles.button}>Click Me</button>
    );
  }
}
export default Button;

Avec les modules CSS, le CSS généré peut ressembler à :

.button_3GjDE {
  border-radius: 3px;
  background-color: green;
  color: white;
}

Le un nom de classe unique avec le hachage _3GjDE évite les conflits en limitant le style au composant Button.

Alternative Approche

Une solution alternative consiste à éviter les sélecteurs génériques et à utiliser une convention de dénomination basée sur les classes pour les composants et les éléments. Par exemple :

.aboutContainer {
  # Some style
}

.aboutContainer__code {
  # Some style
}

Chaque élément nécessitant un style recevrait un nom de classe unique, garantissant que les styles ne sont appliqués que dans le composant spécifique.

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!