CSS modulok a NextJS-ben

A NextJS-be már beépítetten támogatottak a CSS modulok. Ezek különálló CSS fájlok, amelyekben az osztálynevek lokális hatókörben vannak, ami megakadályozza az osztálynevek ütközését a különböző komponensek között.

Nézzük meg, hogyan kell használni őket. Tegyük fel, hogy van egy komponensünk:

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

Készítsünk neki egy CSS modult. Ehhez ugyanabban a mappában készítsünk egy fájlt a .module.css kiterjesztéssel és tetszőleges névvel. Írjunk bele egy CSS osztályt:

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

Importáljuk a CSS modulunkat a komponens fájljába:

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

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

Most alkalmazzuk a CSS osztályt a bekezdésre a komponensünkön belül:

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

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