CSS-модулҳо дар NextJS

Дар NextJS дастгирии дарсохтаи CSS-модулҳо мавҷуд аст. Онҳо файлҳои CSS-и ҷудогона мебошанд, ки дар онҳо номҳои синфҳо дар ҳудуди намоиши маҳаллӣ ҷойгиранд, ки ин аз бозиҳои байни номҳои синфҳо аз компонентҳои гуногун пешгирӣ мекунад.

Биёед бубинем, ки чӣ тавр аз онҳо истифода барад. Фарз мекунем, ки мо як компоненти муайян дорем:

app/test/page.jsxexport default function Test() {
  return <p>
    матн матн матн
  </p>;
}

Биёед барои он CSS-модул эҷод кунем. Барои ин дар ҳамин ҷалладон файле бо васеъшавӣ .module.css ва номи ихтиёрӣ созем. Дар он як синфи CSS-и зеринро нависем:

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

CSS-модули худро ба файли компонент ворид мекунем:

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

export default function Test() {
  return <p>
    матн матн матн
  </p>;
}

Ва акнун синфи CSS-ро ба абзаци дохили компоненти худ татбиқ кунем:

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

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