NextJS တွင် CSS Modules များ

NextJS တွင် CSS Modules များအတွက် အဆင်သင့်ပါဝင်ထောက်ပံ့မှုရှိပါသည်။ ၎င်းတို့သည် သီးခြား CSS ဖိုင်များဖြစ်ပြီး အတွင်းရှိ class အမည်များသည် local scope အတွင်း၌ရှိနေသဖြင့် component အမျိုးမျိုးမှ class အမည်များ တစ်ခုနှင့်တစ်ခုပဋိပက္ခဖြစ်ခြင်းမှ ရှောင်ရှားနိုင်စေပါသည်။

၎င်းတို့ကို အသုံးပြုနည်းကို ကြည့်ရအောင်။ ကျွန်ုပ်တို့တွင် component တစ်ခုရှိသည်ဆိုပါစို့။

app/test/page.jsxexport default function Test() {
  return <p>
    text text text
  </p>;
}

ထိုအတွက် CSS Module တစ်ခုဖန်တီးကြပါစို့။ ဤအတူတူဖိုလ်ဒါအတွင်း၌ပင် ဖိုင်တစ်ခုကို extension အနေဖြင့် .module.css နှင့် မည်သည့်အမည်ပေးကာ ဖန်တီးပါ။ ၎င်းအတွင်း၌ အောက်ပါ CSS class ကိုရေးသားပါ။

app/test/test.module.css.text {
  color: blue;
}

ကျွန်ုပ်တို့၏ CSS module ကို component ဖိုင်အတွင်းသို့ import လုပ်ပါမည်။

app/test/page.jsximport styles from './test.module.css';

export default function Test() {
  return <p>
    text text text
  </p>;
}

ယခု CSS class ကို ကျွန်ုပ်တို့၏ component အတွင်းရှိ အပိုဒ်တွင် အသုံးပြုပါမည်။

app/test/page.jsximport styles from './test.module.css';

export default function Test() {
  return <p className={styles.text}>
    text text text
  </p>;
}