React တွင် CSS modules အတွင်း class များအတွက် composes command

ဤသင်ခန်းစာတွင် CSS modules အတွင်း တစ်ခုမှတစ်ခု class များတွင် CSS style များကို ပြန်လည်အသုံးပြုရန် အလွန်အသုံးဝင်သော နည်းလမ်းတစ်ခုကို လေ့လာပါမည်။

ယခင်သင်ခန်းစာများတွင် ကျွန်ုပ်တို့လုပ်ခဲ့သော buttons application သို့ ပြန်သွားကြပါစို့။ 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;
}

ခလုတ်အားလုံးတွင် အနားသတ်လှည့်ပတ်မှုနှင့် ဖောင့်အရွယ်အစား တူညီစေလိုသည်ဟု ယူဆပါစို့။ တစ်ခုချင်းစီ class တိုင်းတွင် တူညီသော property များကို ထပ်ခါထပ်ခါရေးနိုင်သည်။ သို့သော် CSS modules မှ composes command ကျေးဇူးကြောင့် ကျွန်ုပ်တို့သည် ကွဲပြားစွာလုပ်ဆောင်မည်။

ပထမဦးစွာ ဥပမာ common-btn ကဲ့သို့သော class အသစ်တစ်ခုကို ဖန်တီးပါ၊ ထို့နောက် ထိုတူညီသော property များကို ထည့်သွင်းပါ။ အခြား class များတွင် ဤ class မှ property များကို အသုံးပြုရန် အောက်ပါ syntax ကို ၎င်းတို့အတွင်း၌ အသုံးပြုရမည်။

cssselector {
  composes: class name;
}

ယခုကျွန်ုပ်တို့၏ Buttons.module.css ၏ code သည် အောက်ပါအတိုင်းဖြစ်လာမည်။

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