CSS modules-daky klasslar üçin compizes komandasy React-da

Bu sapakda biz CSS modules-da bir klasyn CSS stillaryny başga bir klasda gaýtadan ulanmak üçin örän peýdaly bir usuly gözden geçireris.

Öňki sapaklarda ýasalan buttons aplikasiýasyna gaýdalyň. Buttons.module.css faýlyna göz aýlalyň:

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

Däl edip, biz ählí düwmeleriň deň ýumşak burçlaryny we şrift ölçegine eýe bolmagyny isleýäris. Elbetde, her klasa birmeňzeş aýratynlyklary ýazyp bilerdik. Emma CSS modules-daky composes komandasy kömegi bilen, biz başgaça hereket ederis.

Ilki bilen, meselem common-btn atly goşmaça bir klas döredip, şol birmeňzeş aýratynlyklary ýerleşdireris. Bu klasdan gelýän aýratynlyklary başgalarynda ulanmak üçin, olarda aşakdaky sintaksisi ulanmaly:

selektor {
	composes: klasyň ady;
}

Indi bizim Buttons.module.css faýlymyzyň kody şeýle görüner:

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

Öňki sapaklaryň meseleleri üçin ýasalan inputs React aplikasiýaňyzy alyň. Ählí inputlar üçin birnäçe birmeňzeş CSS stiline birmeňzeş bahalar beriň. Bu stillaryň ýazylan goşmaça bir klas dörediň. composes kömegi bilen olary inputlar üçin ählí beýleki klassara ýaýradyň.