NextJS'те CSS-модулдар

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 модулдары менен компоненттериңизди стилдеңиз.