CSS модули во NextJS

Во NextJS веќе постои вградена поддршка за CSS модули. Тие претставуваат одделни CSS датотеки, во кои имињата на класите се наоѓаат во локалниот опсег на видливост, што овозможува избегнување на конфликти помеѓу имињата на класите од различни компоненти.

Ајде да погледнеме како да ги користиме. Да претпоставиме дека имаме одредена компонента:

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

Ајде да создадеме CSS модул за неа. За тоа, во истата папка направете датотека со екстензија .module.css и произволно име. Во неа внесете ја следната CSS класа:

.text {
	color: blue;
}

Импортирајте го нашиот CSS модул во датотеката на компонентата:

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

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

А сега применете ја CSS класата на параграфот внутри на нашата компонента:

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

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

Стилизирајте ги вашите компоненти со помош на CSS модули.