La règle composes pour les classes dans les CSS modules avec React

Dans cette leçon, nous allons examiner une technique très utile pour réutiliser les styles CSS d'une classe dans une autre avec les CSS modules.

Revenons à l'application buttons que nous avons créée lors des leçons précédentes. Jetons un œil au fichier Buttons.module.css :

.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;
}

Supposons que nous voulions que tous les boutons aient le même arrondi et la même taille de police. On pourrait, bien sûr, multiplier les propriétés identiques dans chaque classe. Mais grâce à la règle composes des CSS modules, nous allons procéder différemment.

Pour commencer, créons une autre classe, par exemple common-btn, dans laquelle nous placerons ces propriétés identiques. Et pour appliquer les propriétés de cette classe dans d'autres, il faut utiliser dans celles-ci la syntaxe :

sélecteur {
	composes: nom de la classe;
}

Maintenant, le code de notre Buttons.module.css ressemblera à ceci :

.common-btn {
	font-size: 16px;
	border-radius: 3px;
}

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

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

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

Prenez votre application React inputs, que vous avez créée dans les tâches des leçons précédentes. Ajoutez pour toutes les entrées (inputs) quelques styles CSS identiques avec les mêmes valeurs. Créez une classe supplémentaire, dans laquelle ces styles seront définis. Avec l'aide de composes, répartissez-les dans toutes les autres classes pour les entrées.