CSS modulok a NextJS-ben

A NextJS-be már beépítetten támogatottak a CSS modulok. Ezek különálló CSS fájlok, amelyekben az osztálynevek lokális hatókörben vannak, ami megakadályozza az osztálynevek ütközését a különböző komponensek között.

Nézzük meg, hogyan kell használni őket. Tegyük fel, hogy van egy komponensünk:

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

Készítsünk neki egy CSS modult. Ehhez ugyanabban a mappában készítsünk egy fájlt a .module.css kiterjesztéssel és tetszőleges névvel. Írjunk bele egy CSS osztályt:

.text {
	color: blue;
}

Importáljuk a CSS modulunkat a komponens fájljába:

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

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

Most alkalmazzuk a CSS osztályt a bekezdésre a komponensünkön belül:

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

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

Stilizálja a komponenseit CSS modulok segítségével.