Командата 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, което правихте в задачите към предишните уроци. Добавете за всички input полета няколко еднакви CSS стила с еднакви стойности. Създайте допълнителен клас, в който да напишете тези стилове. С помощта на composes ги размножете във всички останали класове за input полета.