Amri ya composes kwa madarasa katika CSS modules kwenye React

Katika somo hili tutachunguzia mbinu muhimu sana kwa kutumia tena mitindo ya CSS ya darasa moja katika darasa lingine katika CSS modules.

Turejee kwenye programu buttons ambayo tulikuwa tukifanya kwenye masomo yaliyopita. Tuangalie kwenye faili 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;
}

Tukichukulia, tunataka, vitufe vyote viwe na mviringo sawa na ukubwa wa herufi uwe sawa. Bila shaka, ingewezekana, kuandika kila sifa ileile katika kila darasa. Lakini shukrani kwa amri composes kutoka kwa CSS modules, tutafanya kazi kwa njia tofauti.

Kwanza tuunde darasa lingine, kwa mfano common-btn, ambayo tutaweka sifa hizi zinazofanana. Na ili kutumia sifa kutoka kwenye darasa hili kwenye mingine, inahitajika kutumia sintaksia ifuatayo ndani yao:

kichaguzi {
	composes: jina la darasa;
}

Sasa kanuni yetu ya Buttons.module.css itaonekana kama hivi:

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

Chukua programu yako ya React inputs, uliyoifanya kwenye kazi za masomo yaliyopita. Ongeza kwa maingizo yote mitindo michache ya CSS inayofanana na thamani zinazofanana. Unda darasa la ziada, ambalo litakuwa na mitindo hii iliyoandikwa. Kwa kutumia composes zisambaze kwenye madarasa yote mengine kwa maingizo.