CSS moduly v NextJS

NextJS už má vstavanú podporu pre CSS moduly. Sú to samostatné CSS súbory, v ktorých sú mená tried v lokálnom rozsahu viditeľnosti, čo umožňuje vyhnúť sa konfliktom medzi názvami tried z rôznych komponentov.

Pozrime sa, ako ich používať. Predpokladajme, že máme nejaký komponent:

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

Vytvorme preň CSS modul. Preto v rovnakom priečinku vytvorme súbor s príponou .module.css a ľubovoľným názvom. V ňom zadefinujme nasledujúcu CSS triedu:

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

Importujme náš CSS modul do súboru komponentu:

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

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

A teraz aplikujme CSS triedu na odsek v našom komponente:

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

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