CSS-moduler i NextJS

NextJS har allerede indbygget understøttelse af CSS-moduler. De er separate CSS-filer, hvor klassenavne er i et lokalt scope, hvilket undgår konflikter mellem klassenavne fra forskellige komponenter.

Lad os se på, hvordan man bruger dem. Antag, at vi har en komponent:

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

Lad os oprette et CSS-modul til den. For at gøre dette, i samme mappe, lav en fil med endelsen .module.css og et vilkårligt navn. I den skriver vi følgende CSS-klasse:

.text {
	color: blue;
}

Vi importerer vores CSS-modul i komponentfilen:

import styles from './test.module.css';

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

Og nu anvender vi CSS-klassen på afsnittet inde i vores komponent:

import styles from './test.module.css';

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

Style dine komponenter ved hjælp af CSS-moduler.