Comanda composes za klase u CSS modulima u React-u

U ovoj lekciji ćemo razmotriti veoma koristan prijem za ponovno korišćenje CSS stilova jedne klase u drugoj u CSS modulima.

Vratimo se na aplikaciju buttons, koju smo pravili na prethodnim lekcijama. Pogledajmo u fajl 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;
}

Pretpostavimo da želimo da svi dugmići imaju isto zaobljenje i veličinu fonta. Mogli bismo, naravno, da u svakoj klasi ponavljamo ista svojstva. Ali zahvaljujući komandi composes iz CSS modula, postupićemo drugačije.

Za početak kreirajmo još jednu klasu, na primer common-btn, u koju ćemo smestiti ta ista svojstva. A da bismo primenili svojstva iz ove klase u drugim, potrebno je da u njima koristimo sintaksu:

selektor {
	composes: naziv klase;
}

Sada će kod našeg Buttons.module.css izgledati ovako:

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

Uzmite svoju React aplikaciju inputs, koju ste pravili u zadacima za prethodne lekcije. Dodajte za sve inpute par istih CSS stilova sa istim vrednostima. Kreirajte dodatnu klasu, u kojoj će biti napisani ti stilovi. Uz pomoć composes rasprostranite ih na sve ostale klase za inpute.