CSS moduļi NextJS

NextJS jau ir iebūvēts atbalsts CSS moduļiem. Tie ir atsevišķi CSS faili, kuros klases nosaukumi atrodas lokālā darbības jomā, kas ļauj izvairīties no konfliktiem starp klases nosaukumiem no dažādiem komponentiem.

Apskatīsim, kā tos lietot. Pieņemsim, ka mums ir kāds komponents:

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

Izveidosim tam CSS moduli. Lai to izdarītu, šajā pašā mapē izveidosim failu ar paplašinājumu .module.css un patvaļīgu nosaukumu. Tajā pierakstīsim šādu CSS klasi:

.text {
	color: blue;
}

Importēsim mūsu CSS moduli komponenta failā:

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

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

Un tagad pielietosim CSS klasi rindkopai mūsu komponenta iekšienē:

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

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

Stilizējiet savus komponentus ar CSS moduļu palīdzību.