CSS Modules trong React

CSS Modules là một giải pháp hiệu quả giúp quản lý và tổ chức CSS trong các dự án React. Nó cung cấp tính năng scoped styles, giúp các class CSS chỉ áp dụng cho một component cụ thể mà không bị ảnh hưởng bởi các style từ các component khác.

1. CSS Modules là gì?

CSS Modules là một tệp CSS mà các class và ID trong đó được tự động "đóng gói" với một tên duy nhất. Điều này đảm bảo rằng các style chỉ áp dụng cho thành phần mà chúng được import, tránh được vấn đề xung đột tên trong CSS.

2. Lợi ích của CSS Modules

• Scoped styles: Các class CSS chỉ áp dụng cho component cụ thể, tránh xung đột style giữa các component.
• Dễ bảo trì: Code dễ đọc và dễ tổ chức hơn khi style được đóng gói cùng với component.
• Hỗ trợ mạnh mẽ: CSS Modules hoạt động tốt với hầu hết các công cụ build như Webpack.

3. Cách sử dụng CSS Modules trong React

Bước 1: Tạo tệp CSS Module

Tạo một tệp CSS với phần mở rộng .module.css. Ví dụ:

	/* styles.module.css */	
.container {	
	  background-color: #f0f0f0;	
	  padding: 20px;	
	  border-radius: 8px;	
}	
		
.title {	
	  color: #333;	
	  font-size: 24px;	
	  font-weight: bold;	
}	

Bước 2: Import tệp CSS Module vào component

Trong component React, bạn có thể import tệp CSS Module như sau:

import styles from './styles.module.css';	
		
function MyComponent() {	
	  return (	
	    <div className={styles.container}>	
	      <h1 className={styles.title}>Chào mừng đến với CSS Modules!</h1>	
	    </div>	
	  );	
}	
		
export default MyComponent;	

Bước 3: Render component

Khi render component, các class sẽ được tự động chuyển thành tên duy nhất. Ví dụ:

<div class="styles_container__3Hd0j">	
	  <h1 class="styles_title__2xA6Y">Chào mừng đến với CSS Modules!</h1>	
</div>	

4. Kết hợp CSS Modules với Dynamic Classes

Bạn có thể kết hợp nhiều class hoặc sử dụng dynamic class bằng cách sử dụng template strings hoặc thư viện như clsx và classnames:

import clsx from 'clsx';	
import styles from './styles.module.css';	
		
function MyComponent({ isActive }) {	
	  return (	
	    <div className={clsx(styles.container, { [styles.active]: isActive })}>	
	      Nội dung động!	
	    </div>	
	  );	
}	

5. So sánh với Styled-Components

6. Khi nào nên sử dụng CSS Modules?

CSS Modules phù hợp khi:

• Bạn muốn sử dụng CSS thuần nhưng cần scoped styles.
• Dự án có cấu trúc phức tạp và yêu cầu quản lý style hiệu quả.
• Không muốn sử dụng CSS-in-JS như Styled-Components.

7. Kết luận

CSS Modules là một công cụ mạnh mẽ và dễ sử dụng để quản lý CSS trong các dự án React. Với khả năng scoped styles và sự linh hoạt, CSS Modules là lựa chọn tuyệt vời cho các dự án có quy mô từ nhỏ đến lớn.