Reactda CSS modullarida klasslar uchun composes komandasi

Ushbu darsda CSS modullarida bir CSS klassining stillarini boshqasida qayta ishlatishning juda foydali usulini ko'rib chiqamiz.

Oldingi darslarda qilgan buttons ilovasiga qaytaylik. Buttons.module.css fayliga ko'z tutamiz:

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

Faraz qilaylik, biz barcha tugachalarning chetrasi bir xil yumaloq va shrift o‘lchami bir xil bo‘lishini istaymiz. Albatta, har bir classga bir xil xususiyatlarni yozish mumkin edi. Ammo CSS modullaridagi composes komandasi tufayli, biz boshqacha ish tutamiz.

Boshlash uchun, yana bir klass yaratamiz, masalan common-btn, va unga bu bir xil xususiyatlarni qo'yamiz. Boshqa klasslarda ushbu klass xususiyatlarini qo‘llash uchun ularning ichida quyidagi sintaksisdan foydalanish kerak:

selector {
	composes: klass nomi;
}

Endi bizning Buttons.module.css faylimizning kodi quyidagicha ko'rinadi:

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

Oldingi darslar mashqlarida qilgan inputs React ilovangizni oling. Barcha inputlar uchun bir xil qiymatga ega bo‘lgan bir nechta bir xil CSS stillarini qo‘shing. Ushbu stillar yozilgan qo‘shimcha klass yarating. composes yordamida ularni boshqa barcha input klasslariga tarqating.