Không tìm thấy mô-đun không thể giải quyết kiểu css toàn cầu
Trong React js, nơi các lớp hoạt động tương tự như các biến cục bộ trong JavaScript, Mô-đun CSS chỉ là một. tập tin css. Nó làm giảm phạm vi toàn cầu của phong cách React. Ngoài ra, nó là một công cụ ngăn chặn phạm vi toàn cầu và xung đột bằng cách tạo một chuỗi ngẫu nhiên dưới dạng tên className và thêm một hàm băm duy nhất để làm cho mỗi className trở nên độc nhất. Chúng ta có thể ngăn xung đột không gian tên cho các lớp CSS bằng cách sử dụng Mô-đun CSS. Chỉ cần nhập tệp Mô-đun CSS vào thành phần của bạn sẽ cho phép bạn sử dụng cùng một lớp CSS trên nhiều tệp CSS khác nhau Show
Bất kỳ tệp CSS nào cũng có thể được cập nhật một cách an toàn mà không phải lo lắng rằng nó sẽ ảnh hưởng đến các trang khác vì nó chỉ có phạm vi cục bộ và chỉ có thể ảnh hưởng đến các thành phần khác đang sử dụng tệp mô-đun CSS đã thay đổi. Khi được trình bày trong trình duyệt bằng Mô-đun CSS, nó sẽ tạo các lớp CSS ngẫu nhiên chỉ hiển thị khi trang được kiểm tra kỹ lưỡng Toàn bộ mục đích của bài viết này là để chứng minh rằng CSS-in-JS và Thành phần được tạo kiểu không phải là điều bắt buộc khi sử dụng React và React cũng có thể được sử dụng với các Mô-đun CSS mà không gặp bất kỳ sự cố nào Ưu và nhược điểm của các mô-đun CSSMô-đun CSS có một số ưu điểm
Cũng có một số khuyết điểm
Vậy, tại sao chúng ta nên sử dụng Mô-đun CSS?
Sử dụng các mô-đun CSS trong ReactMột điểm rất hay là không cần cấu hình WebPack. React xử lý mọi thứ cho bạn khi bạn cài đặt ứng dụng tạo-React; Nếu bạn thêm Bản mô tả vào dự án React hiện có, thông thường bạn sẽ gặp lỗi khi sử dụng Mô-đun CSS. Để giải quyết vấn đề này, hãy cài đặt Typescript với React bằng dòng lệnh sau
Kể từ khi tôi bắt đầu sử dụng React Typescript với CSS Modules, tôi đã gặp phải vấn đề này. Để bắt đầu sử dụng Mô-đun CSS trong Dự án React, bạn không cần nhập hoặc cài đặt bất kỳ thư viện bên thứ ba nào. Bạn phải nhập mô-đun CSS trước khi sử dụng các thành phần React của nó Không cần mã bổ sung hoặc mã của bên thứ ba mà bạn đang thêm vào Mô-đun CSS khi sử dụng chúng. Bạn chỉ cần thay đổi tên tệp CSS thành “[filename]. mô-đun. css”; . Bạn phải sử dụng từ khóa nhập khi sử dụng Mô-đun CSS để nhập tệp vào một thành phần cụ thể. Bạn phải chỉ định các lớp khi tích hợp Mô-đun CSS vào dự án React của mình, chẳng hạn như cách bạn truy cập thuộc tính của đối tượng trong Javascript tiêu chuẩn bằng cách sử dụng ký hiệu dấu chấm hoặc cú pháp dấu ngoặc Sử dụng ký hiệu dấu chấm
Bạn nên sử dụng ký hiệu ngoặc nếu các lớp CSS của bạn chứa dấu gạch nối
Bạn có thể kết hợp phong cách
Tôi tin rằng mọi thứ đều rõ ràng. Đây là những khái niệm cơ bản của một đối tượng Javascript đơn giản Tạo một mô-đun CSSCác thư viện CSS như Styled Component, Emotion và styled-jsx ngày nay được phổ biến rộng rãi. Tôi đã quan sát thấy rằng Mô-đun CSS là con đường phía trước, đặc biệt là đối với phạm vi toàn cầu và chất lượng có thể tái sử dụng giúp trải nghiệm tạo kiểu trở nên liền mạch hơn nhiều. Các mô-đun CSS đang được sử dụng rộng rãi hơn để mô tả các kiểu cục bộ và tránh phạm vi toàn cầu trong một thành phần cụ thể Hãy bắt đầu bằng cách làm việc trên một dự án khiêm tốn. Chúng tôi sẽ tạo một [fileName]. mô-đun. tập tin css. Thành phần nơi [fileName] của chúng tôi. mô-đun. css sẽ được nhập được hiển thị bên dưới Người dùng TypeScript phải thêm một. d. tập tin ts; . mô-đun. css. d. ts. ”
[Tên tệp]. mô-đun. css sẽ như sau
Nhập biểu định kiểu của mô-đun CSS dưới tiền tố [classes] hoặc kiểu để thêm nó vào thành phần. Tiền tố kiểu hoặc lớp không bắt buộc, nhưng chúng tôi sẽ sử dụng các lớp để thực hành tốt nhất. Để sử dụng các kiểu, đảm bảo đường dẫn bao gồm “. /[tên tệp]. mô-đun. css”
Tích hợp các mô-đun CSSTrong khi sử dụng kiểu dưới dạng đối tượng JavaScript để xử lý bổ sung và bảo mật, Mô-đun CSS cho phép bạn viết kiểu trong tệp CSS. Ký hiệu dấu chấm hoặc dấu ngoặc được hiển thị ở trên (Trong chủ đề Sử dụng Mô-đun CSS) phải được sử dụng để tham chiếu các Mô-đun CSS đã nhập trong thành phần React của chúng tôi. Trong thành phần React của chúng tôi, việc tận dụng các Mô-đun CSS được thể hiện trong đoạn mã sau Trong Thành phần chức năng phản ứng, chúng tôi sẽ sử dụng Mô-đun CSS. Mã bên dưới tăng giá trị đếm lên một và sử dụng useState trong FunctionCounter. js Thành phần sẽ được tạo
Chúng ta sẽ thấy một thành phần lớp với các Mô-đun CSS. Chúng tôi sẽ tạo một thành phần cơ sở Lớp với ClassClunter. phần mở rộng tệp js. Đoạn mã dưới đây tăng giá trị của số đếm lên 2 ________số 8_______Cuối cùng, hãy xem Ứng dụng. thành phần js. Chúng tôi sẽ nhập FunctionCounter. js và ClassCounter. js vào Ứng dụng. thành phần js
Đầu ra Thành phần dựa trên chức năng và lớp từ Mô-đun CSS của bạn được hiển thị bên dưới Hãy cùng điều tra trình duyệt để quan sát cách mà 4 được hình thành bằng cách sử dụng hàm băm thu được từ các Mô-đun CSS và xem mã trên trình duyệtPhát lại phiên mã nguồn mởOpenReplay là bộ phát lại phiên mã nguồn mở cho phép bạn xem những gì người dùng làm trên ứng dụng web của bạn, giúp bạn khắc phục sự cố nhanh hơn. OpenReplay tự lưu trữ để kiểm soát hoàn toàn dữ liệu của bạn Bắt đầu tận hưởng trải nghiệm sửa lỗi của bạn - bắt đầu sử dụng OpenReplay miễn phí CSS toàn cầuViệc sử dụng CSS toàn cầu không bị cấm bởi Mô-đun CSS. Bạn có thể nhập biểu định kiểu của mình bằng cách sử dụng cùng một phương pháp bạn đã sử dụng để nhập ES6 0Ngoài ra, bạn có thể sử dụng từ khóa “toàn cầu” để thay đổi phạm vi của lớp sao cho Mô-đun CSS không thể sửa đổi nó, chẳng hạn như bằng cách nối thêm một id ngẫu nhiên bên cạnh nó 1Nhiều mô-đun CSSViệc sử dụng nhiều lớp không bị hạn chế bởi Mô-đun CSS; 2Bộ chọn lớp giảBộ chọn được gọi là lớp giả chọn ra các mục ở trạng thái cụ thể. Vì các mô-đun CSS hoạt động bằng cách cung cấp các lớp cho mục của bạn, nên việc thêm các bộ chọn lớp giả rất đơn giản 3Phần kết luậnTrong bài viết này, chúng ta đã học cách sử dụng CSS Modules trong React Function và Class Base Component. Theo tôi, các Mô-đun CSS là một giải pháp lý tưởng cho các vấn đề nêu trên. Dù bạn quyết định thế nào, đừng để sự huyên náo đánh lừa bạn; . Tất cả chúng ta phải chấp nhận rằng sự cường điệu đó cuối cùng sẽ phai nhạt. Luôn có chỗ để cải thiện tính hữu dụng của chương trình này và kiến thức của bạn về các Mô-đun CSS Kho lưu trữ trên GithubNhấn vào đây để xem dự án đã hoàn thành trên Github
|