Début de l'apprentissage de la stylisation avec les CSS modules dans React

Dans cette leçon et les suivantes, nous allons examiner une autre approche moderne et efficace pour styliser les composants React - l'utilisation des CSS modules.

Les CSS modules dans cette approche sont des fichiers CSS compilés séparés, dans lesquels les noms de classes et d'animations se trouvent dans une portée locale, ce qui permet d'éviter les conflits entre les noms de classes provenant de différents composants.

Pour commencer, créons et lançons notre petite application React buttons. Pour cela, créons un dossier vide test, entrons dedans et dans le terminal, tapons les commandes suivantes :

npx create-react-app buttons
cd buttons
npm start

Si vous avez une version récente de React, c'est-à-dire qu'elle supporte Create React App v2 et au-dessus, alors aucune configuration supplémentaire n'est nécessaire, puisque dans ce cas, les CSS modules seront supportés automatiquement. Pour vérifier, regardez dans package.json, si la dépendance react-scripts est de version 2.x.x et au-dessus, alors tout est en ordre. Sinon, mettez à jour votre React.

Notre application pour la stylisation par la méthode CSS modules contiendra trois boutons.

Nous nommerons les fichiers CSS, en respectant la convention, de la manière suivante : [name].module.css.

Créons maintenant le dossier components dans src, et ajoutons-y le fichier Buttons.module.css avec les styles CSS pour nos boutons :

.btn1 {
	background-color: orange;
	border: 2px solid brown;
	color: white;
}

.btn2 {
	background-color: red;
	border: 2px solid green;
	color: yellow;
}

.btn3 {
	background-color: brown;
	border: 2px solid yellowgreen;
	color: orange;
}

De plus, dans le dossier components, créons le fichier vide du composant React Buttons.js, en attendant, ne touchez pas au fichier généré App.js, nous nous en occuperons plus tard !

Dans Buttons.js, importons obligatoirement le fichier avec les styles CSS, et appliquons ces styles à chaque bouton en utilisant l'attribut class :

import styles from "./Buttons.module.css"; 

const Buttons = () => (
	<>
		<button class={styles.btn1}>btn1</button>
		<button class={styles.btn2}>btn2</button>
		<button class={styles.btn3}>btn3</button>
	</>
);

export default Buttons;

Au fait, il n'est pas obligatoire d'utiliser le mot styles pour le nom de l'objet importé contenant les styles, vous pouvez le nommer comme vous voulez.

Dans la leçon suivante, nous terminerons notre application.

En suivant la théorie de cette leçon, générez l'application React inputs.

Utilisez l'approche CSS modules, présentée dans la leçon. Créez dans src de l'application inputs le fichier Inputs.js pour le composant React Inputs, qui contiendra trois champs de saisie (inputs). Écrivez quelques styles dans Inputs.modules.css pour les champs de saisie. Importez ce fichier dans Inputs.js et appliquez les styles.