composes-komento luokille CSS modules Reactissa

Tässä oppitunnissa tarkastelemme erittäin hyödyllistä tekniikkaa CSS-tyylien uudelleenkäyttämiseen yhdestä luokasta toisessa CSS modules -ympäristössä.

Palataan buttons -sovellukseen, jonka teimme edellisillä tunneilla. Katsotaan tiedostoa 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;
}

Oletetaan, että haluamme kaikille napeille saman pyöristyksen ja fontin koon. Tietysti voisimme lisätä samat ominaisuudet jokaisessa luokassa. Mutta composes -komennon ansiosta CSS moduuleissa, toimimme toisin.

Aluksi luomme toisen luokan, esimerkiksi common-btn, johon laitamme nämä samat ominaisuudet. Ja jos haluat käyttää tämän luokan ominaisuuksia muissa, sinun täytyy käyttää niissä syntaksia:

valitsija {
	composes: luokan nimi;
}

Nyt Buttons.module.css -tiedostomme näyttää tältä:

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

Ota React-sovelluksesi inputs, jota teit edellisten oppituntien tehtävissä. Lisää kaikille syötekentille pari samaa CSS-tyyliä samoilla arvoilla. Luo lisäluokka, johon kirjoitat nämä tyylit. composes -komennon avulla levitä ne kaikkiin muihin syötekenttien luokkiin.