React - 6.7 Utiliser les modules CSS dans React

Dans un projet React, les styles d'un composant peuvent entrer en conflit avec ceux d'un autre composant. Les modules CSS règlent ce problème en limitant la portée des styles au composant qui les importe. Cette leçon montre comment transformer un fichier CSS en module et l'utiliser sur un bouton.

Renommer le fichier CSS en module

Pour qu'un fichier CSS devienne un module, son nom doit se terminer par .module.css. Il suffit donc de renommer le fichier, puis de mettre à jour son nom dans l'import du composant. Si le nom n'est pas mis à jour, l'application ne retrouve plus le style.

Le composant importe ensuite le module sous la forme d'un objet. Chaque classe du fichier CSS devient alors une propriété de cet objet. Le nom du fichier ci-dessous est un exemple à remplacer par celui de votre projet.

import styles from './<nom-du-fichier>.module.css';

Appliquer une classe de module au bouton

Pour appliquer le style, on supprime l'ancienne classe du bouton. On la remplace par une classe issue du module, en écrivant styles suivi du nom de la classe. Ce nom doit correspondre à une classe présente dans le fichier CSS.

Une fois la classe appliquée, le style ne s'applique qu'au composant qui importe le module. Les autres composants de l'application ne sont pas touchés.

<button className={styles.bouton}>...</button>

• Supprimer l'ancienne classe du bouton.
• Écrire className={styles.bouton} à la place.
• Vérifier que la classe bouton existe dans le fichier CSS module.

La suite : les requêtes multimédia

La vidéo annonce ensuite comment utiliser les requêtes multimédia avec les modules CSS. Ces requêtes permettent d'adapter le style à la taille de l'écran, par exemple sur un téléphone.

Cette partie fait l'objet de la suite du cours. Vous pourrez alors combiner les modules CSS avec des règles d'adaptation à l'écran.

En résumé

Un module CSS isole les styles d'un composant React. Pour l'utiliser, on renomme le fichier en .module.css, on met à jour l'import, puis on applique les classes avec styles.nomDeLaClasse. Cette méthode évite les conflits de noms entre composants.

Points clés

• Un fichier CSS devient un module lorsque son nom se termine par .module.css.
• L'import d'un module donne un objet dont les propriétés correspondent aux classes CSS.
• On applique une classe avec className={styles.nomDeLaClasse}.
• Les styles d'un module ne s'appliquent qu'au composant qui l'importe.

Questions fréquentes

Que faut-il faire après avoir renommé le fichier CSS ?

Il faut mettre à jour son nom dans l'instruction d'import du composant. Sans cela, le style n'est plus trouvé.

Comment appliquer le style du module à un bouton ?

On remplace la classe existante par className={styles.bouton}, en utilisant le nom de classe défini dans le module.

Que montre la suite de la vidéo ?

Elle présente l'utilisation des requêtes multimédia avec les modules CSS, pour adapter le style à la taille de l'écran.