CSS modulesдеги Reactте класс үчүн compposes командасы

Бул сабакта биз CSS modulesде бир класстын CSS стилдерин башка класста кайра колдонуу үчүн абдан пайдалуу ыкманы карайбыз.

Өткөн сабактарда жасаган 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;
}

Бардык баскычтардын тегеректелиши жана шрифт өлчөмү бирдей болсун деп коёлу. Албетте, ар бир класска бирдей касиеттерди көбөйтүп жазса болот. Бирок CSS modulesдин composes командасынын жардамы менен биз башка жол менен иштейбиз.

Адегенде, мисалы, 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 класстарына таратыңыз.