Cách nhập nhiều tệp css trong phản ứng

Nếu bạn còn khá mới với CSS, bạn có thể đã hoặc chưa gặp phải sự cố nghiêm trọng xảy ra khi kiểu của ứng dụng mở rộng— vì các quy tắc CSS tuân theo phạm vi toàn cầu, hai hoặc nhiều lớp cùng tên sẽ xung đột. Xử lý nhiều biểu định kiểu và theo dõi các quy ước đặt tên trong các tệp CSS có thể trở nên nặng nề và nếu bạn không đủ cẩn thận, bạn sẽ gặp phải một số xung đột từ các tên lớp giống hệt nhau

Mô-đun CSS có thể giải quyết các lỗi có khả năng xuất hiện này, đặc biệt là khi ứng dụng của bạn phát triển. Cuối cùng, chúng cho phép chúng tôi sử dụng cùng một tên lớp trong nhiều tệp mà không có lỗi bộ chọn và quy tắc bằng cách xác định phạm vi tên lớp cục bộ theo mặc định

Mô-đun CSS đơn giản là một tệp .css, trong đó các lớp hoạt động tương tự như các biến cục bộ trong Javascript. Nó là một công cụ làm cho mỗi lớp trở nên độc nhất bằng cách bao gồm một hàm băm trong tên của chúng

Tạo một mô-đun CSS

Nếu bạn đang sử dụng create-react-app, việc tạo Mô-đun CSS cho một thành phần tương đối dễ dàng. Thực hiện theo quy ước đặt tên điển hình cho tệp css, nhưng hãy chèn module trước .css, như vậy. [name].module.css

Để xem một ví dụ, đây là tệp Task.module.css của tôi trong một ứng dụng công việc đơn giản

• Phần CSS1. Tên tệp là style1. css

CSS

________ 184 ________ 185 ________ 186

create-react-app014

create-react-app9html45create-react-app94create-react-app236create-react-app86

create-react-app9____950html51____194create-react-app81create-react-app86

create-react-app9____956create-react-app94create-react-app81create-react-app86

html60

• đầu ra. Sử dụng kiểu1. css mà không cần nhập style2. tập tin css.  

• CSS Phần 2. Tên tệp là style2. css

html

html61

create-react-app9____963

create-react-app9____965

html66

• đầu ra. Sau khi sử dụng cả hai tệp CSS (style1 và style2)

Ghi chú. Có hai cách khác nhau để nhập một tệp CSS vào một tệp khác bằng cách sử dụng @import url(“style2. css”); . css”; . css”; . @nhập url(“style2. css”); trong phần đầu.
 

CSS là nền tảng của các trang web, được sử dụng để phát triển trang web bằng cách tạo kiểu trang web và ứng dụng web. Bạn có thể học CSS từ đầu bằng cách làm theo Hướng dẫn CSS và Ví dụ về CSS này

Bạn có thể nhập nhiều tệp CSS không?

Tôi nên đặt các tệp CSS ở đâu trong React?

Tại sao tôi không thể nhập CSS vào React?

Cách tốt nhất để sử dụng CSS trong React là gì?