Comment puis-je réaliser des importations CSS à l'échelle des composants dans React ?

Importations CSS à l'échelle des composants dans React

Introduction
De nombreuses applications React sont confrontées à des défis dans la gestion des styles CSS, en particulier lorsqu'elles traitent plusieurs composants. Pour garantir une isolation appropriée et éviter les styles globaux, vous souhaiterez peut-être implémenter des importations CSS à l'échelle des composants.

Modules CSS
Une approche populaire pour réaliser des importations CSS à l'échelle des composants consiste à utiliser CSS. Modules. Avec les modules CSS, les noms de classe et les noms d'animation sont automatiquement étendus au composant dans lequel le fichier CSS est importé. Les URL et les importations respectent également la syntaxe des requêtes de module, garantissant ainsi que les styles sont isolés au sein du composant.

Exemple de code
Considérez un composant React et le CSS qui l'accompagne. fichier :

Composant

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;

CSS

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

Transformation post-CSS
Une fois que les modules CSS ont effectué leur transformation, la sortie CSS ressemblera à comme :

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

Le suffixe "_3GjDE" représente un hachage généré aléatoirement, garantissant que les noms de classe sont uniques au sein du composant.

Approche alternative : Convention de dénomination basée sur les classes
Si vous préférez éviter les plugins externes, vous pouvez adopter une convention de dénomination basée sur les classes pour les composants et les éléments. En utilisant des noms de classe uniques pour chaque élément, vous pouvez maintenir l'isolation des composants.

Exemple de code

.aboutContainer {
  # Some style
}

.aboutContainer__code {
  # Some 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!