CSS Modulları NextJS-də

NextJS-də artıq CSS modulları üçün daxili dəstək var. Onlar ayrı-ayrı CSS fayllarıdır, burada sinif adları lokallıq əhatə dairəsində yerləşir, bu da müxtəlif komponentlərdən gələn sinif adları arasında toqquşmaların qarşısını almağa imkan verir.

Gəlin onlardan necə istifadə edəcəyimizə baxaq. Tutaq ki, bizim müəyyən bir komponentimiz var:

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

Gəlin onun üçün bir CSS modulu yaradaq. Bunun üçün eyni qovluqda genişlənməsi .module.css olan və istənilən adı olan bir fayl yaradaq. Orada aşağıdakı CSS sinfini yazaq:

.text {
	color: blue;
}

CSS modulumuzu komponent faylına idxal edək:

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

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

İndi isə CSS sinfini komponentimizin daxilindəki abzasa tətbiq edək:

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

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

Komponentlərinizi CSS modulları ilə stilizə edin.