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 модуляў.