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;
}
0 duy nhất và nhập tệp đó vào tệp chính để CSS sẽ được áp dụng cho tất cả các thành phầnNhư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;
}
1 bên ngoài hộp, vì vậy chúng tôi không cần cài đặt hoặc định cấu hình bất kỳ thứ gì để làm cho nó hoạt độngKhi 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;
}
2Giả sử, chúng ta có một tệp
.title {
font-size: 2.5rem;
}
3 trong thư mục import headerStyles from "./header.module.css";
0 với nội dung như sau.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";
1 chúng ta import file này theo cách sauimport 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
CSS Modules
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";
3Vì 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
Some text...
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
Some text...
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