CSS moduliai NextJS

NextJS jau turi įmontuotą palaikymą CSS moduliams. Jie yra atskiri CSS failai, kuriuose klasės pavadinimai yra vietinėje aprėptyje, kas leidžia išvengti konfliktų tarp klasių pavadinimų iš skirtingų komponentų.

Pažiūrėkime, kaip jais naudotis. Tarkime, kad turime tam tikrą komponentą:

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

Sukurkime jam CSS modulį. Tam šiame pačiame aplanke sukurkime failą su plėtiniu .module.css ir bet kokiu pavadinimu. Jame parašykime tokią CSS klasę:

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

Importuokime mūsų CSS modulį į komponento failą:

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

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

O dabar pritaikykime CSS klasę pastraipai mūsų komponento viduje:

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

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