NextJS da CSS-modullar

NextJS da allaqachon CSS-modullar o‘rnatilgan qo‘llab-quvvatlash mavjud. Ular alohida CSS fayllari bo‘lib, ulardagi sinf nomlari mahalliy ko‘rish sohasida joylashgan, bu turli komponentlardan kelgan sinf nomlari o‘rtasidagi ziddiyatlarning oldini oladi.

Keling, ular qanday ishlatilishiga nazar tashlaylik. Faraz qilaylik, bizda ma’lum bir komponent bor:

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

Keling, uning uchun CSS-modul yaratamiz. Buning uchun xuddi shu papkada kengaytmasi .module.css bo‘lgan va ixtiyoriy nomga ega fayl yaratamiz. Unda quyidagi CSS sinfini yozamiz:

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

CSS modulimizni komponent fayliga import qilamiz:

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

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

Endi esa CSS sinfini komponentimiz ichidagi abzasga qo‘llaymiz:

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

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