CSS-модули NextJS-ում

NextJS-ում արդեն կա ներկառուցված աջակցություն CSS-модулиների համար: Դրանք առանձին CSS ֆայլեր են, որոնցում դասերի անունները gտեղաբաշխված են տեղային տեսանելիության տարածքում, ինչը թույլ է տալիս խուսափել կոնֆլիկտներից դասերի անունների միջև տարբեր կոմպոնենտներից:

Եկեք նայենք, թե ինչպես օգտագործել դրանք: Ենթադրենք, մենք ունենք որոշակի կոմպոնենտ.

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 մոդուլների միջոցով: