React có hỗ trợ mô-đun CSS không?

Bạn có thể sử dụng các mô-đun CSS với bất kỳ gói mô-đun nào như webpack hoặc browserify hoặc bất kỳ cách nào khác hỗ trợ nhập tệp CSS

Một giải pháp thay thế cho các mô-đun CSS trong React để tạo phạm vi cục bộ là sử dụng các thành phần được tạo kiểu

Lợi ích của các mô-đun CSS

• Sử dụng các mô-đun CSS tránh xung đột không gian tên cho các lớp CSS
• Bạn có thể sử dụng cùng một lớp CSS trong nhiều tệp CSS
• Bạn có thể tự tin cập nhật bất kỳ tệp CSS nào mà không lo ảnh hưởng đến các trang khác
• Sử dụng Mô-đun CSS tạo các lớp CSS ngẫu nhiên khi được hiển thị trong trình duyệt

Mô-đun CSS là cách tạo kiểu ưa thích trong Gatsby. js và Tiếp theo. js

Tại sao chúng ta cần sử dụng Mô-đun CSS?

Trong ứng dụng React, chúng tôi thường tạo một tệp

.title {
  font-size: 2.5rem;
}

Nhưng việc sử dụng các mô-đun CSS giúp tạo các tệp CSS riêng biệt cho từng thành phần và là cục bộ của tệp cụ thể đó và tránh xung đột tên lớp

Thế là đủ về phần Giới thiệu. Hãy xem cách sử dụng nó

Sử dụng các mô-đun CSS

Hỗ trợ mô-đun CSS được cung cấp bởi

.title {
  font-size: 2.5rem;
}

Khi làm việc với React, quy ước đặt tên cho tệp CSS bằng phần mở rộng

.title {
  font-size: 2.5rem;
}

Giả sử, chúng ta có một tệp

.title {
  font-size: 2.5rem;
}

import headerStyles from "./header.module.css";

.title {
  font-size: 2.5rem;
}

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

thì ở file

import headerStyles from "./header.module.css";

import headerStyles from "./header.module.css";

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

và sử dụng nó như thế này

<div>
 <h1 className={headerStyles.title}>CSS Modules</h1>
</div>

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Bản demo CodeSandbox

Xem bản xem trước cho hộp cát mã ở trên tại đây

Nếu bạn kiểm tra bản xem trước ở trên, bạn sẽ thấy rằng mặc dù chúng tôi đã đặt _____02 làm lớp cho h1, nhưng lớp CSS cuối cùng lại khác khi được hiển thị trong trình duyệt

Vì vậy CSS Modules giúp tạo các lớp ngẫu nhiên khi hiển thị trên trình duyệt

Sử dụng dấu gạch ngang khi đặt tên lớp

Người ta thường đặt tên một lớp CSS bằng dấu gạch nối như

import headerStyles from "./header.module.css";

Vì vậy, để sử dụng lớp đó bên trong các thành phần, chúng ta cần sử dụng ký hiệu ngoặc như thế này

<div className={headerStyles["menu-items"]}>Some text...</div>

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Bản demo CodeSandbox

Thêm nhiều lớp

Hãy xem xét chúng tôi có hai lớp riêng biệt như thế này

________số 8

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Sau đó, để sử dụng cả hai lớp này cho cùng một phần tử, chúng ta cần sử dụng cú pháp mẫu ES6 như thế này

<div className={`${headerStyles["bold"]} ${headerStyles["active"]}`}>Some text...</div>

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Bản demo CodeSandbox

Phần kết luận

• Các mô-đun CSS giúp tránh xung đột tên lớp toàn cầu
• Chúng cũng giúp giữ cho các tệp CSS sạch sẽ, dễ tổ chức và bảo trì
• Chúng tương tự như styled-components để duy trì phạm vi cục bộ
• Chúng nằm trong phạm vi cục bộ để tránh các tác dụng phụ không chủ ý ở những nơi khác
• Chúng được sử dụng làm cơ chế tạo kiểu ưa thích trong Gatsby. js và Tiếp theo. js và chúng hoạt động vượt trội

Bạn có thể tìm thấy mã nguồn GitHub hoàn chỉnh cho bài viết này trong kho lưu trữ này

Học JavaScript hiện đại không phải là một nhiệm vụ dễ dàng. Nhưng đừng lo, hướng dẫn này sẽ giúp bạn trở thành một chuyên gia về JavaScript hiện đại và giỏi hơn về React

Đừng quên đăng ký để nhận bản tin hàng tuần của tôi với các mẹo, thủ thuật và bài viết tuyệt vời trực tiếp trong hộp thư đến của bạn tại đây

React có hỗ trợ các mô-đun CSS không?

Tôi có thể sử dụng các mô-đun CSS trong phản ứng gốc không?

Phạm vi của mô-đun CSS cho React là gì?

Tôi có thể sử dụng các biến CSS trong React không?