NextJS da CSS-modullar

NextJS da allaqachon CSS-modullar o‘rnatilgan qo‘llab-quvvatlash mavjud. Ular alohida CSS fayllari bo‘lib, ulardagi sinf nomlari mahalliy ko‘rish sohasida joylashgan, bu turli komponentlardan kelgan sinf nomlari o‘rtasidagi ziddiyatlarning oldini oladi.

Keling, ular qanday ishlatilishiga nazar tashlaylik. Faraz qilaylik, bizda ma’lum bir komponent bor:

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

Keling, uning uchun CSS-modul yaratamiz. Buning uchun xuddi shu papkada kengaytmasi .module.css bo‘lgan va ixtiyoriy nomga ega fayl yaratamiz. Unda quyidagi CSS sinfini yozamiz:

.text {
	color: blue;
}

CSS modulimizni komponent fayliga import qilamiz:

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

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

Endi esa CSS sinfini komponentimiz ichidagi abzasga qo‘llaymiz:

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

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

Komponentlaringizni CSS modullari yordamida uslublang.