CSS moduly v NextJS

NextJS již má vestavěnou podporu CSS modulů. Jedná se o samostatné CSS soubory, ve kterých jsou názvy tříd v lokálním oboru platnosti, což umožňuje vyhnout se konfliktům mezi názvy tříd z různých komponent.

Podívejme se, jak je používat. Předpokládejme, že máme nějakou komponentu:

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

Vytvořme pro ni CSS modul. Pro to v této stejné složce vytvoříme soubor s příponou .module.css a libovolným názvem. V něm napíšeme následující CSS třídu:

.text {
	color: blue;
}

Importujme náš CSS modul do souboru komponenty:

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

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

A nyní aplikujme CSS třídu na odstavec uvnitř naší komponenty:

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

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

Stylujte své komponenty pomocí CSS modulů.