CSS Modules trong NextJS

NextJS đã có hỗ trợ tích hợp sẵn cho CSS Modules. Chúng là các tệp CSS riêng biệt, trong đó tên class nằm trong phạm vi cục bộ, cho phép tránh xung đột giữa các tên class từ các component khác nhau.

Hãy xem cách sử dụng chúng. Giả sử chúng ta có một component nào đó:

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

Hãy tạo một CSS Module cho nó. Để làm điều này, trong cùng thư mục đó hãy tạo một tệp có phần mở rộng .module.css và tên bất kỳ. Trong đó, chúng ta sẽ viết class CSS sau:

.text {
	color: blue;
}

Import CSS module của chúng ta vào tệp component:

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

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

Và bây giờ hãy áp dụng class CSS cho đoạn văn bên trong component của chúng ta:

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

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

Hãy tạo kiểu cho các component của bạn bằng CSS Modules.