CSS-moduulit NextJS:ssä

NextJS:ssä on jo sisäänrakennettu tuki CSS-moduuleille. Ne ovat erillisiä CSS-tiedostoja, joissa luokkien nimet ovat paikallisessa näkyvyysalueessa, mikä mahdollistaa nimikkonfliktien välttämisen eri komponenttien luokkanimien välillä.

Katsotaan kuinka niitä käytetään. Oletetaan, että meillä on jokin komponentti:

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

Luodaan sille CSS-moduuli. Tehdään tätä varten samaan kansioon tiedosto, jonka pääte on .module.css ja mielivaltainen nimi. Kirjoitetaan siihen seuraava CSS-luokka:

.text {
	color: blue;
}

Tuodaan CSS-moduuli komponenttitiedostoon:

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

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

Ja nyt käytetään CSS-luokkaa komponenttimme sisällä olevaan kappaleeseen:

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

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

Tyylittäkää komponenttinne CSS-moduuleilla.