Дастури 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 онҳоро ба ҳамаи синфҳои дигар барои воридкунӣ паҳн кунед.