Ukaz composes za razrede v CSS modulih v React

V tej lekciji bomo obravnavali zelo uporaben postopek za ponovno uporabo CSS slogov enega razreda v drugem v CSS modulih.

Vrnimo se k aplikaciji buttons, ki smo jo izdelovali v prejšnjih lekcijah. Poglejmo v datoteko 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;
}

Recimo, da želimo, da imajo vse gumbi enako zaobljenost in velikost pisave. Seveda bi lahko v vsakem razredu podvojili enake lastnosti. Toda zahvaljujoč ukazu composes iz CSS modulov, bomo ravnali drugače.

Za začetek ustvarimo še en razred, na primer common-btn, v katerega bomo postavili te enake lastnosti. In da bi uporabili lastnosti iz tega razreda v drugih, moramo uporabiti sintakso:

selektor {
	composes: ime razreda;
}

Zdaj bo koda našega Buttons.module.css izgledala takole:

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

Vzemite svojo React aplikacijo inputs, ki ste jo izdelovali v nalogah za prejšnje lekcije. Dodajte vsem vnosnim poljem nekaj enakih CSS slogov z enakimi vrednostmi. Ustvarite dodaten razred, v katerem bodo napisani ti slogi. Z pomočjo composes jih razmnožite po vseh ostalih razredih za vnosna polja.