La commande composes pour les fichiers dans les modules CSS dans React

La commande composes peut également être appliquée pour réutiliser les styles d'un fichier dans un autre.

Revenons à l'application buttons, que nous avons créée dans les leçons précédentes. Supposons que nous voulions ajouter à tous les boutons les mêmes ombres, le style de curseur et la police en gras. Laissez ces styles être situés dans le fichier App.module.css. Ouvrons ce fichier et ajoutons au début une nouvelle classe beauty avec ces styles :

.beauty { 
	box-shadow: rgba(50, 50, 50, 0.2) 0 5px 5px 0;
	font-weight: bold;
	cursor: pointer;
}

Appliquons-la pour styliser les boutons. Pour cela, ouvrons Buttons.module.css et apportons des modifications à la classe common-btn. Nous ajouterons une ligne avec la commande composes, où nous indiquerons le nom de la classe beauty, que nous voulons appliquer, et le fichier App.module.css, dans lequel se trouve cette classe :

.common-btn {
	composes: beauty from "../App.module.css"; 
	font-size: 16px;
	border-radius: 3px;
}

Prenez le code de votre application de la tâche de la leçon précédente et créez une ombre pour vos champs de saisie en utilisant la méthode présentée dans cette leçon.