CSS-Module in NextJS

NextJS hat bereits eingebaute Unterstützung für CSS-Module. Dabei handelt es sich um separate CSS-Dateien, in denen sich Klassennamen in einem lokalen Gültigkeitsbereich befinden, was Konflikte zwischen Klassennamen aus verschiedenen Komponenten vermeidet.

Lassen Sie uns einen Blick darauf werfen, wie man sie verwendet. Nehmen wir an, wir haben eine bestimmte Komponente:

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

Lassen Sie uns ein CSS-Modul dafür erstellen. Dazu erstellen wir im selben Ordner eine Datei mit der Endung .module.css und einem beliebigen Namen. Darin schreiben wir die folgende CSS-Klasse:

.text {
	color: blue;
}

Importieren wir unser CSS-Modul in die Datei der Komponente:

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

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

Und nun wenden wir die CSS-Klasse auf den Absatz innerhalb unserer Komponente an:

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

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

Stylen Sie Ihre Komponenten mit CSS-Modulen.