CSS-moduler i NextJS
NextJS har allerede innebygd støtte for CSS-moduler. De er separate CSS-filer der klassennavnene er i lokalt scope, noe som unngår konflikter mellom klassennavn fra forskjellige komponenter.
La oss se hvordan vi bruker dem. Anta at vi har en komponent:
export default function Test() {
return <p>
text text text
</p>;
}
La oss opprette en CSS-modul for den.
For å gjøre dette, i samme mappe
lage en fil med endelsen
.module.css og et vilkårlig
navn. I den skriver vi følgende CSS-klasse:
.text {
color: blue;
}
Importer CSS-modulen vår i komponentfilen:
import styles from './test.module.css';
export default function Test() {
return <p>
text text text
</p>;
}
Og nå bruker vi CSS-klassen på avsnittet inne i komponenten vår:
import styles from './test.module.css';
export default function Test() {
return <p className={styles.text}>
text text text
</p>;
}
Style komponentene dine ved hjelp av CSS-moduler.
