Bien que les styles en ligne soient utiles pour des styles simples ou dynamiques, la plupart des applications réelles reposent sur des fichiers CSS externes. Cette méthode permet de séparer les styles de la logique des composants et facilite leur gestion à mesure que les projets prennent de l’ampleur.

React prend en charge les fichiers CSS externes nativement. Vous pouvez écrire du CSS classique et l’appliquer aux composants à l’aide de noms de classes, comme dans le développement web traditionnel.

Création d’un fichier CSS externe

Commencez par créer un fichier CSS et définir vos styles :

/* styles.css */
.title {
  font-size: 32px;
  font-weight: 700;
  color: rebeccapurple;
}

Ce fichier CSS contient une classe simple pouvant être réutilisée dans plusieurs composants.

Importation du CSS dans un composant

Pour utiliser ces styles, importez le fichier CSS dans votre fichier de composant :

import "./styles.css";

const App = () => (
  <>
    <h1 className="title">App title</h1>
  </>
);

Dans React, l’attribut class s’écrit className car class est un mot réservé en JavaScript.

Fonctionnement du CSS externe dans React

Les fichiers CSS sont appliqués globalement par défaut. N'importe quel composant peut utiliser une classe définie dans un fichier CSS importé. Les styles se comportent de la même manière que dans le HTML et le CSS standards. Cela rend le CSS externe familier et facile à utiliser, en particulier pour les développeurs issus du développement web traditionnel.

Quand utiliser le CSS externe

Le CSS externe est un bon choix lorsque :

• Les styles sont partagés entre plusieurs composants ;
• Les mises en page deviennent plus complexes ;
• Une séparation claire entre la structure et le style est souhaitée.

Pour les projets de plus grande envergure, le CSS externe conduit souvent à un code plus propre et plus facile à maintenir.