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 модульдері арқылы стильдеңіз.