CSS-მოდულები NextJS-ში

NextJS-ში უკვე არსებობს ჩაშენებული მხარდაჭერა CSS-მოდულებისთვის. ისინი წარმოადგენენ ცალკეულ CSS ფაილებს, რომლებშიც კლასების სახელები მდებარეობს ლოკალურ ვიზუალურ არეში, რაც საშუალებას აძლევს თავიდან აიცილოთ კონფლიქტები კლასების სახელებს შორის სხვადასხვა კომპონენტებიდან.

მოდით ვნახოთ, როგორ გამოვიყენოთ ისინი. დავუშვათ, გვაქვს გარკვეული კომპონენტი:

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 მოდულების გამოყენებით.