Команда 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 растраюйце іх па ўсіх астатніх класах для інпутаў.