CSS moduļi NextJS

NextJS jau ir iebūvēts atbalsts CSS moduļiem. Tie ir atsevišķi CSS faili, kuros klases nosaukumi atrodas lokālā darbības jomā, kas ļauj izvairīties no konfliktiem starp klases nosaukumiem no dažādiem komponentiem.

Apskatīsim, kā tos lietot. Pieņemsim, ka mums ir kāds komponents:

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

Izveidosim tam CSS moduli. Lai to izdarītu, šajā pašā mapē izveidosim failu ar paplašinājumu .module.css un patvaļīgu nosaukumu. Tajā pierakstīsim šādu CSS klasi:

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

Importēsim mūsu CSS moduli komponenta failā:

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

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

Un tagad pielietosim CSS klasi rindkopai mūsu komponenta iekšienē:

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

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