La regola composes per le classi in CSS modules in React

In questa lezione esamineremo una tecnica molto utile per il riutilizzo degli stili CSS di una classe in un'altra nei CSS modules.

Torniamo all'applicazione buttons che abbiamo creato nelle lezioni precedenti. Diamo un'occhiata al file 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;
}

Supponiamo di volere che tutti i pulsanti abbiano lo stesso arrotondamento e la stessa dimensione del font. Si potrebbe, certamente, replicare le stesse proprietà in ogni classe. Ma grazie alla regola composes dei CSS modules, agiremo in modo diverso.

Per iniziare, creiamo un'altra classe, ad esempio common-btn, in cui inseriremo queste proprietà comuni. E per applicare le proprietà di questa classe nelle altre, è necessario utilizzare in esse la sintassi:

selettore {
	composes: nome della classe;
}

Ora il codice del nostro Buttons.module.css sarà così:

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

Prendi la tua applicazione React inputs, che hai creato negli esercizi delle lezioni precedenti. Aggiungi a tutti gli input un paio di stili CSS identici con gli stessi valori. Crea una classe aggiuntiva, in cui verranno scritti questi stili. Con l'aiuto di composes replicateli in tutte le altre classi per gli input.