CSS-modules in NextJS

NextJS het ingeboude ondersteuning vir CSS-modules. Dit is aparte CSS-lêers waarin klassename in 'n plaaslike omvang is, wat konflik tussen klassename van verskillende komponente voorkom.

Laat ons kyk hoe om dit te gebruik. Kom ons sê ons het 'n sekere komponent:

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

Laat ons 'n CSS-module daarvoor skep. Om dit te doen, in dieselfde gids maak 'n lêer met die uitbreiding .module.css en 'n enige naam. Skryf die volgende CSS-klas daarin:

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

Voer ons CSS-module in die komponentlêer in:

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

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

En laat ons nou die CSS-klas toepas op die paragraaf binne ons komponent:

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

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