NextJS-de CSS modullar

NextJS-de eýýäm CSS modullaryny goldamak gurulandyr. Olar aýratyn CSS faýllarydyr, olarda klas atlary ýerli görkezilýän meýdanda ýerleşýär, bu bolsa dürli komponentlerden gelen klas atlarynyň arasyndaky çaknyşyklaryň öňüni alýar.

Geliň, olary nädip ulanmalydygyna göz aýlalyň. Bizde bir komponent bar diýeliň:

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

Geliň onuň üçin CSS modulyny döredeliň. Bunyň üçin şol bir papkada giňişligi .module.css bolan we erkin atly faýl döredeliň. Onda aşakdaky CSS klasyny ýazalyň:

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

CSS modulymyzy komponent faýlyna import edeliň:

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

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

Indi bolsa CSS klasyny komponentimiziň içindäki abzasa ulanaylyň:

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

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