CSS Modules ใน NextJS

NextJS มีการสนับสนุน CSS Modules ในตัวแล้ว พวกมันคือไฟล์ CSS แยกต่างหาก ซึ่งชื่อคลาส อยู่ในขอบเขตเฉพาะที่ (local scope) ช่วยหลีกเลี่ยงความขัดแย้งระหว่าง ชื่อคลาสจากคอมโพเนนต์ต่างๆ

มาดูวิธีใช้งานกัน สมมติว่าเรามีคอมโพเนนต์หนึ่ง:

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

มาสร้าง CSS Module สำหรับมันกัน สำหรับสิ่งนี้ในโฟลเดอร์เดียวกันนี้ ให้สร้างไฟล์ที่มีนามสกุล .module.css และชื่อใดก็ได้ ในนั้นให้เขียนคลาส CSS ต่อไปนี้:

.text {
	color: blue;
}

นำเข้า CSS Module ของเราในไฟล์ คอมโพเนนต์:

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 Modules