Komanda composes klasėms CSS moduliuose React

Šioje pamokoje apžvelgsime labai naudingą metodą CSS stilių pernaudojimui iš vienos klasės kitoje CSS moduliuose.

Grįžkime prie aplikacijos buttons, kurią darėme ankstesnėse pamokose. Pažvelkime į failą 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;
}

Tarkime, kad norime, kad visų mygtukų būtų vienodas apvalinimas ir šrifto dydis. Žinoma, galima būtų kiekvienoje klasėje pakartoti tuos pačius properties. Tačiau, pasinaudoję komanda composes iš CSS modulių, veiksime kitaip.

Pirmiausia sukurkime dar vieną klasę, pavyzdžiui common-btn, į kurią sudėsime šiuos vienodus properties. O norint pritaikyti šios klasės properties kituose, reikia naudoti juose sintaksę:

selektorius {
	composes: klasės pavadinimas;
}

Dabar mūsų Buttons.module.css kodas atrodys taip:

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

Paimkite savo React aplikaciją inputs, kurią darėte užduotyse ankstesnėse pamokose. Pridėkite visiems inputams porą vienodų CSS stilių su vienodomis reikšmėmis. Sukurkite papildomą klasę, kurioje bus parašyti šie stiliai. Su composes pagalba išskleiskite juos visose kitose inputų klasėse.