Moduli za CSS katika NextJS

NextJS tayari ina usaidizi wa ndani wa moduli za CSS. Hizi ni faili tofauti za CSS ambapo majina ya madarasa yako katika eneo la ndani la uonekano, jambo linalozuia migogoro kati ya majina ya madarasa kutoka kwa viungo tofauti.

Hebu tuangalie jinsi ya kuzitumia. Tuchukulie tuna kijenzi fulani:

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

Wacha tuunde moduli ya CSS yake. Ili kufanya hivyo, folda ile ile tutafanya faili yenye kiambishi .module.css na jina la kiholela. Ndani yake tuandike darasa lifuatalo la CSS:

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

Wacha tuingize moduli yetu ya CSS kwenye faili ya kijenzi:

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

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

Sasa sasa tutumie darasa la CSS kwenye aya ndani ya kijenzi chetu:

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

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