Команда composes за класи во CSS modules во React

Во оваа лекција ќе разгледаме многу корисен пристап за повторно користење на CSS стилови од една класа во друга во CSS modules.

Да се вратиме на апликацијата 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;
}

Да претпоставиме дека сакаме сите копчиња да имаат исто заоблување и големина на фонт. Се разбира, можеше едноставно да ги додадеме истите својства во секоја класа. Но, благодарение на командата composes од CSS modules, ние ќе постапиме поинаку.

Прво, ќе создадеме уште една класа, на пример 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 распространете ги по сите други класи за инпути.