compores հրամանը CSS modules-ում React-ում դասերի համար

Այս դասում մենք կդիտարկենք շատ օգտակար մեթոդ 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 հավելվածը, որը դուք պատրաստել էիք նախորդ դասերի առաջադրանքներում: Բոլոր դաշտերի համար ավելացրեք մի քանի նույնական CSS ոճեր նույն արժեքներով: Ստեղծեք լրացուցիչ դաս, որում գրված կլինեն այդ ոճերը: composes-ի օգնությամբ տարածեք դրանք բոլոր մյուս դաշտերի դասերում: