Команда 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 пренесите их у све остале класе за уносна поља.