CSS-moduler i NextJS

NextJS har redan inbyggt stöd för CSS-moduler. De är separata CSS-filer där klassnamnen finns i ett lokalt scope, vilket undviker konflikter mellan klassnamn från olika komponenter.

Låt oss titta på hur man använder dem. Anta att vi har en komponent:

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

Låt oss skapa en CSS-modul för den. För att göra detta, skapa en fil med ändelsen .module.css och ett valfritt namn i samma mapp. I den skriver vi följande CSS-klass:

.text {
	color: blue;
}

Importera vår CSS-modul till komponentfilen:

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

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

Och nu applicerar vi CSS-klassen till stycket inuti vår komponent:

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

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

Styla dina komponenter med hjälp av CSS-moduler.