CSS moduliai NextJS

NextJS jau turi įmontuotą palaikymą CSS moduliams. Jie yra atskiri CSS failai, kuriuose klasės pavadinimai yra vietinėje aprėptyje, kas leidžia išvengti konfliktų tarp klasių pavadinimų iš skirtingų komponentų.

Pažiūrėkime, kaip jais naudotis. Tarkime, kad turime tam tikrą komponentą:

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

Sukurkime jam CSS modulį. Tam šiame pačiame aplanke sukurkime failą su plėtiniu .module.css ir bet kokiu pavadinimu. Jame parašykime tokią CSS klasę:

.text {
	color: blue;
}

Importuokime mūsų CSS modulį į komponento failą:

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

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

O dabar pritaikykime CSS klasę pastraipai mūsų komponento viduje:

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

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

Stilizuokite savo komponentus naudodami CSS modulius.