Comment puis-je garantir la portée des composants CSS dans mon application React ?

Importations CSS à l'échelle des composants dans React

L'importation de CSS dans les composants React est essentielle pour le style, mais garantir des styles à l'échelle des composants peut être un défi . Dans votre cas, vous souhaitez que CSS s'applique uniquement aux éléments d'un composant particulier et disparaisse lorsque le composant est démonté.

Une approche consiste à utiliser les modules CSS, une technique populaire pour obtenir un style à l'échelle des composants dans React. . Avec les modules CSS, les noms de classe et les noms d'animation dans le fichier CSS spécifié sont étendus localement par défaut. Cela garantit que les styles sont appliqués uniquement aux éléments du composant qui a importé le module.

Considérez cet exemple :

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;

/* ./styles/button.css */
.button {
  border-radius: 3px;
  background-color: green;
  color: white;
}

En utilisant un module CSS, le CSS généré sera inclure des valeurs de hachage générées aléatoirement, garantissant des noms de classe uniques pour chaque composant. Cela évite les conflits de style entre les composants.

Une approche alternative consiste à éviter les sélecteurs génériques et à adopter 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
}

En attribuant des noms de classe uniques à tous les éléments, vous pouvez éviter les conflits de style sans compter sur les modules CSS.

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!