Proprietatea composes pentru clase în CSS modules în React

În această lecție vom analiza o tehnică foarte utilă pentru reutilizarea stilurilor CSS dintr-o clasă în alta în CSS modules.

Să revenim la aplicația buttons, pe care am făcut-o în lecțiile anterioare. Să aruncăm o privire în fișierul 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;
}

Să presupunem că vrem ca tuturor butoanelor să le avem aceeași rotunjire și aceeași dimensiune a fontului. Am putea, desigur, să multiplicăm în fiecare clasă proprietăți identice. Dar datorită proprietății composes din CSS modules, vom proceda altfel.

Pentru început, vom crea încă o clasă, de exemplu common-btn, în care vom pune aceste proprietăți identice. Iar pentru a aplica proprietățile din această clasă în alte clase, trebuie să folosim în ele sintaxa:

selector {
	composes: numele clasei;
}

Acum codul nostru Buttons.module.css va arăta astfel:

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

Luați aplicația React inputs, pe care ați făcut-o în sarcinile din lecțiile anterioare. Adăugați pentru toate câmpurile de introducere câteva stiluri CSS identice cu valori identice. Creați o clasă suplimentară, în care vor fi scrise aceste stiluri. Cu ajutorul composes răspândiți-le în toate celelalte clase pentru câmpurile de introducere.