NextJS-de CSS modullar

NextJS-de eýýäm CSS modullaryny goldamak gurulandyr. Olar aýratyn CSS faýllarydyr, olarda klas atlary ýerli görkezilýän meýdanda ýerleşýär, bu bolsa dürli komponentlerden gelen klas atlarynyň arasyndaky çaknyşyklaryň öňüni alýar.

Geliň, olary nädip ulanmalydygyna göz aýlalyň. Bizde bir komponent bar diýeliň:

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

Geliň onuň üçin CSS modulyny döredeliň. Bunyň üçin şol bir papkada giňişligi .module.css bolan we erkin atly faýl döredeliň. Onda aşakdaky CSS klasyny ýazalyň:

.text {
	color: blue;
}

CSS modulymyzy komponent faýlyna import edeliň:

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

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

Indi bolsa CSS klasyny komponentimiziň içindäki abzasa ulanaylyň:

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

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

CSS modullary bilen komponentleriňizi stilize ediň.