CSS modules-тегі React-та сыныптар үшін composes командасы

Бұл сабақта біз 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;
}

Алдыңғы сабақтардың тапсырмаларында жасаған inputs React қолдануыңызды алыңыз. Барлық енгізу өрістеріне бірнеше бірдей CSS стильдерін бірдей мәндермен қосыңыз. Осы стильдердің жазылған қосымша сынып жасаңыз. composes көмегімен оларды енгізу өрістеріне арналған барлық басқа сыныптарға таратыңыз.