React တွင် CSS modules ဖိုင်များအတွက် composes command

composes command ကို ဖိုင်တစ်ခုမှ အခြားဖိုင်တစ်ခုသို့ style များပြန်လည်အသုံးပြုရန် လည်း အသုံးပြုနိုင်ပါသည်။

ယခင် သင်ခန်းစာများတွင် ကျွန်ုပ်တို့ လုပ်ခဲ့သည့် buttons application သို့ ပြန်သွားကြပါစို့။ ကျွန်ုပ်တို့သည် button အားလုံးတွင် အရိပ်များ၊ cursor style နှင့် စာလုံးထူ style တို့ကို တူညီစွာ ထည့်သွင်းလိုသည်ဆိုပါစို့။ ထို style များကို App.module.css ဖိုင်ထဲတွင် ထားမည်ဆိုပါစို့။ ဤဖိုင်ကို ဖွင့်၍ အစတွင် beauty ဟူသည့် class အသစ်တစ်ခုကို ထို style များနှင့် ထည့်လိုက်ကြပါစို့။

App.module.css.beauty { 
  box-shadow: rgba(50, 50, 50, 0.2) 0 5px 5px 0;
  font-weight: bold;
  cursor: pointer;
}

ကျွန်ုပ်တို့ button များကို style လုပ်ရန် ဤ class ကို အသုံးပြုကြပါစို့။ ဤအတွက် Buttons.module.css ကို ဖွင့်ပြီး common-btn class ထဲတွင် ပြောင်းလဲမှုများ ပြုလုပ်ကြပါမည်။ ကျွန်ုပ်တို့သည် composes command ပါဝင်သည့် စာကြောင်းတစ်ကြောင်းကို ထည့်သွင်းမည်ဖြစ်ပြီး၊ ၎င်းတွင် ကျွန်ုပ်တို့ အသုံးပြုလိုသည့် beauty class ၏ အမည်နှင့် ထို class ရှိရာ App.module.css ဖိုင်ကို ဖော်ပြပေးရပါမည်။

Buttons.module.css.common-btn {
  composes: beauty from "../App.module.css"; 
  font-size: 16px;
  border-radius: 3px;
}