CSS Modulet në NextJS

Në NextJS tashmë ka mbështetje të integruar për CSS Modulet. Ato paraqesin skedarë CSS të veçantë, ku emrat e klasave janë në një fushëveprim lokale, që lejon shmangien e konflikteve midis emrave të klasave nga komponentë të ndryshëm.

Le të shohim se si të përdorim ato. Le të themi se kemi një komponent:

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

Le të krijojmë një CSS Modul për të. Për ta bërë këtë, në të njëjtin dosje krijojmë një skedar me extension .module.css dhe çdo emër të dëshiruar. Në të, le të shkruajmë klasën e mëposhtme CSS:

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

Le të importojmë CSS Modulin tonë në skedarin e komponentit:

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

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

Dhe tani le të aplikojmë klasën CSS në paragrafin brenda komponentit tonë:

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

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