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

Այս դասում մենք կդիտարկենք շատ օգտակար մեթոդ CSS modules-ում մի CSS դասի ոճերը մեկ այլ դասում վերաօգտագործելու համար:

Վերադառնանք buttons հավելվածին, որը մենք պատրաստել էինք նախորդ դասերում: Նայենք Buttons.module.css ֆայլին:

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, որի մեջ կտեղադրենք այս նույնական հատկությունները: Եվ այլ դասերում այս դասի հատկությունները կիրառելու համար, պետք է օգտագործել հետևյալ շարահյուսությունը.

cssընտրող {
  composes: դասի անվանում;
}

Այժմ մեր Buttons.module.css կոդը կունենա հետևյալ տեսքը.

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;
}