CSS-moduler i NextJS

NextJS har redan inbyggt stöd för CSS-moduler. De är separata CSS-filer där klassnamnen finns i ett lokalt scope, vilket undviker konflikter mellan klassnamn från olika komponenter.

Låt oss titta på hur man använder dem. Anta att vi har en komponent:

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

Låt oss skapa en CSS-modul för den. För att göra detta, skapa en fil med ändelsen .module.css och ett valfritt namn i samma mapp. I den skriver vi följande CSS-klass:

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

Importera vår CSS-modul till komponentfilen:

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

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

Och nu applicerar vi CSS-klassen till stycket inuti vår komponent:

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

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