Komposiidikäsk CSS moodulite klasside jaoks Reactis

Selles õppetükis vaatleme väga kasulikku meetodit CSS stiilide ümberkasutamiseks ühest klassist teises CSS moodulites.

Pöördume tagasi rakenduse buttons juurde, mida me tegime eelmistel tundidel. Heidame pilgu failile 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;
}

Oletame, et me soovime, et kõigil nuppudel oleks sama ümardamine ja fondi suurus. Loomulikult võiks igasse klassi kopeerida samad omadused. Kuid tänu CSS moodulite käsklusele composes teeme me seda teistmoodi.

Alustuseks loome veel ühe klassi, näiteks common-btn, kuhu paneme need samad omadused. Ja nende omaduste rakendamiseks teistesse klassidesse, tuleb kasutada nendes järgmist süntaksit:

valija {
	composes: klassi nimi;
}

Nüüd näeb meie Buttons.module.css faili kood välja selline:

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

Võtke oma React rakendus inputs, mida te tegite eelmiste tundide ülesannetes. Lisage kõikide sisendväljade jaoks paar sama väärtusega CSS stiili. Looge täiendav klass, kuhu kirjutate need stiilid. composes käsuga rakendage need kõikidesse teistesse sisendväljade klassidesse.