Reactда CSS modules даги класслар учун composes командаси

Бу дарсда биз CSS modules да бир класснинг CSS стилларини бошқа классда қайта ишлатишнинг жуда фойдали усулини кўриб чиқамиз.

Ўтган дарсларда биз ясаган buttons иловасига қайтайлик. 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;
}

Фарз қилайлик, биз барча тугмачаларнинг бурчакларининг ишлари бир хил бўлишини ва шрифт ўлчами бир хил бўлишини истаймиз. Албатта, ҳар бир классга бир хил хоссаларни ёзиб кўпириб чиқиш мумкин. Аммо CSS modules даги composes командаси ёрдамида биз бошқача киламиз.

Бошлаш учун, яна бир класс яратамиз, масалан common-btn, унга бу бир хил хоссаларни қўямиз. Ва бу класснинг хоссаларини бошқаларда ишлатиш учун, уларда куйидаги синтаксисдан фойдаланиш керак:

селектор {
	composes: класс номи;
}

Энди бизнинг Buttons.module.css файлимизнинг коди куйидагича кўринади:

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

Ўтган дарслардаги вазифаларда ясаган React inputs иловангизни олинг. Барча киритиш майдонилари учун бир хил қийматларга эга бўлган бир-жуфт бир хил CSS стилларни қўшинг. Ушбу стиллар ёзилган қўшимча класс яратинг. composes ёрдамида уларни киритиш майдонилари учун бошқа барча классларга тарқатинг.