Module Styling

ကျတော်တို့ styling တွေထဲမှာ နောက်ဆုံးတခု ဖြစ်တဲ့ module styling နည်းကိုလေ့လာလိုက်ကြရအောင်

အဲနည်းက တော်တော်လေး အသုံးများကြပါတယ် ဘာလို့ဆိုတော့ သူက ကျတော်တို့ ရဲ့ component တခုထဲမှာ

import လုပ်ပြီးတော့ သူ့ကိုအသုံးပြုလိုက်တဲ့ နေရာကလွဲပြီးတော့ တခြား styling တွေ မှာ သက်ရောက်မှုမရှိလို့ပါ ပဲ

အဲအတွက်ကြောင့် သူ့ကို တော်တော်လေး အသုံးပြုကြပါတယ်

သူ့ကိုရေးတဲ့အခါကျတော့ ဘယ်လိုမျိုးရေးရမှာလည်းဆိုတော့

// rest of code 
<h1 className={styles.moduleStyling}>Module Styling</h1>

ဒီလိုလေး object.key ပုံစံနဲ့ရေးရပါတယ်

အဲအရှေ့က style ဆိုတဲ့ ဟာက ဘယ်ကနေပြီးလာတာလည်းဆိုတော့

ကျတော်တို့က

import styles from './style.module.css'
// rest of code

ဒီလိုလေး import လုပ်ထားတာပါ

style ဆိုတဲ့ နေရာမှာ ကြိုက်တာထည့်လို့ရပါတယ် ကျတော်ကတော့ styles ကို သုံးတာအကျင့်ဖြစ်နေလို့ပါ

ပြီးတော့ နောက်ထပ်တခု ထူးခြားတာကိုတွေ့ရပါလိမ့်မယ် အဲဒါက ဘာလည်းဆိုတော့ css file name မှာ

module ဆိုတာလေးပါနေတာပါ

ဟုတ်ပါတယ် ကျတော်တို့ file name ကို ဒီလိုလေး ပေးထားလိုက်တော့ ဘယ်ဟာက module file

ဆိုပြီးတော့ သိသာသွားပါတယ်

ဒီလောက်ဆိုရင်တော့ တော်တော်လေး နားလည်သွားမယ်လို့ထင်ပါတယ်

Css code တွေက ကျတော်တို့ အရင် css ရေးထုံးရေးနည်းအတိုင်းပဲမလို့ ကျတော် မပြတော့ပါဘူး

ဒီလောက်ဆိုရင် ကျတော်တို့ styling အကြောင်းကို နားလည်သွားမယ်လို့ထင်ပါတယ်

Last updated