A composes parancs CSS modulokban lévő osztályokhoz Reactben

Ebben a leckében egy nagyon hasznos technikát fogunk megvizsgálni a CSS stílusok újrafelhasználására egy osztályból egy másikba CSS modulokban.

Térjünk vissza a buttons alkalmazáshoz, amelyet az előző leckéken készítettünk. Nézzük meg a Buttons.module.css fájlt:

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

Tegyük fel, hogy azt szeretnénk, ha minden gombnak ugyanaz a lekerekítése és betűmérete lenne. Természetesen lehetne minden osztályba ugyanazokat a tulajdonságokat bemásolni. De a CSS modulok composes parancsának köszönhetően másképp fogunk cselekedni.

Először hozzunk létre egy másik osztályt, például common-btn, amelybe helyezzük ezeket az azonos tulajdonságokat. És hogy alkalmazni tudjuk az osztály tulajdonságait másokban, az alábbi szintaxist kell használni bennük:

szelektor {
	composes: osztály neve;
}

Most a Buttons.module.css kódja így fog kinézni:

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

Vegyétek elő a saját React inputs alkalmazásotokat, amelyet az előző leckék feladataiban készítettetek. Adjatok hozzá minden inputmezőhöz pár azonos CSS stílust azonos értékekkel. Hozzatok létre egy további osztályt, amelybe ezek a stílusok íródnak. A composes segítségével terjesszétek szét őket az összes többi input osztályba.