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 модуллар ёрдамида стилланг.