Tệp CSS không hoạt động trong React
“CSS-in-JS” đề cập đến một mẫu trong đó CSS được tạo bằng JavaScript thay vì được xác định trong các tệp bên ngoài Show Lưu ý rằng chức năng này không phải là một phần của React, nhưng được cung cấp bởi các thư viện của bên thứ ba. React không có ý kiến về cách định nghĩa các kiểu; Tôi có thể tạo hoạt ảnh trong React không?React có thể được sử dụng để tăng sức mạnh cho hoạt ảnh. Xem React Transition Group, React Motion, React Spring hoặc Framer Motion chẳng hạn Tạo kiểu là một phần quan trọng trong việc phát triển bất kỳ ứng dụng web hiện đại nào. Thời của các trang web HTML đơn giản đã qua lâu rồi. Bây giờ các trang web cần phải có thiết kế đẹp để thu hút người dùng và có vẻ đáng tin cậy. Hãy xem cách bạn có thể tạo kiểu cho các ứng dụng React của mình Bài viết dưới đây không trình bày danh sách đầy đủ tất cả các cách tạo kiểu cho ứng dụng React, mà chỉ là một số cách được chọn mà cá nhân tôi thấy hữu ích tệp CSSCách rõ ràng và đơn giản nhất để tạo kiểu cho ứng dụng React là nhập các tệp CSS. Đây thực sự là cách làm việc mặc định và nếu bạn đã sử dụng ứng dụng tạo-phản ứng để thiết lập dự án của mình thì bạn nên chuẩn bị sẵn tất cả và hoạt động. Hãy xem ứng dụng của bạn. js và ứng dụng. tập tin css
Trong đoạn mã trên được lấy từ Ứng dụng. css, bạn có thể thấy rằng chúng tôi đang sử dụng CSS thông thường để tạo kiểu cho ứng dụng React. Cũng giống như trong bất kỳ ứng dụng web nào khác, hãy đảm bảo rằng bộ chọn thực sự đang nhắm mục tiêu các phần tử có liên quan và thì đấy. Bạn vừa tạo kiểu cho ứng dụng React của mình Để chứng minh quan điểm của mình, tôi đã thêm mã tùy chỉnh tạo kiểu cho phần tử h1 ở đầu tệp. Nó khớp với phần tử h1 mà tôi đã thêm vào trong JSX của Ứng dụng. js
Hãy xem liệu nó có áp dụng các kiểu có liên quan không Ví dụ ứng dụng 1Có vẻ như nó đã làm. Tất cả những điều kỳ diệu xảy ra vì nhập khẩu '. /Ứng dụng. css’; tuyên bố ở đầu Ứng dụng. js. Dòng mã này chịu trách nhiệm nhập các biểu định kiểu. Bây giờ bình luận nó ra và xem những gì sẽ xảy ra Ví dụ ứng dụng 2Nó trông không hoàn toàn giống nhau, phải không? kiểu dáng nội tuyếnKỹ thuật này đặc biệt hữu ích khi cố gắng thực hiện các thay đổi kiểu dáng rất nhỏ ở đây và ở đó. Hãy hoàn tác các thay đổi mà chúng tôi đã triển khai trong Ứng dụng. css để có một khởi đầu mới. Giả sử rằng lần này chúng ta muốn tạo kiểu cho phần tử h1 đó thành màu đỏ. Chúng ta có thể dễ dàng thực hiện nó bằng cách sử dụng thuộc tính style Ví dụ ứng dụng 3Điều quan trọng cần chỉ ra là thuộc tính kiểu không chấp nhận mã CSS thông thường. Thay vào đó, nó mong đợi một đối tượng có thuộc tính là tên lạc đà của thuộc tính CSS. Các giá trị sẽ được cung cấp dưới dạng chuỗi. Để tham khảo chính xác hơn, vui lòng xem tài liệu chính thức về phong cách của React Thành phần theo kiểuBạn đã bao giờ nghe nói về styled-components chưa? . Đó là cách yêu thích của tôi để tạo kiểu mã React. Bạn sẽ thấy tại sao Tái bút. Để được giải thích chi tiết hơn về styled-components, vui lòng xem bài viết của Osman. Nó bao gồm các thư viện chi tiết hơn Bạn có thể cài đặt các thành phần theo kiểu bằng cách chạy $ npm cài đặt – lưu các thành phần theo kiểu trong thư mục gốc của ứng dụng React của bạn Sau đó, chúng ta có thể chỉ cần xác định thành phần YellowHeader mới của mình và bắt đầu sử dụng nó trên ứng dụng. Hãy xem nhanh mã Ví dụ ứng dụng 4Đó là 3 cách cơ bản nhất để tạo style cho ứng dụng React. Điều quan trọng cần lưu ý là danh sách này không đầy đủ. Có nhiều lựa chọn hơn ngoài kia. Một số trong số đó sẽ được đề cập chi tiết hơn trong các bài viết sắp tới tại Upmostly Tại sao CSS không tải?Một trang web có thể không tải tệp CSS do bộ nhớ đệm của trình duyệt . Đây là nguyên nhân phổ biến nhất và dễ khắc phục nhất vì bạn chỉ cần xóa bộ đệm khỏi trình duyệt của mình. Tuy nhiên, đôi khi một dòng mã không hợp lệ hoặc xung đột với các chủ đề và plugin khác cũng có thể khiến tệp CSS không thể đọc được.
CSS có hoạt động với React không?Điều tuyệt vời về các mô-đun CSS là chúng có thể được sử dụng với CSS bình thường hoặc SASS. Ngoài ra, nếu đang sử dụng ứng dụng Tạo phản ứng, bạn có thể bắt đầu sử dụng các mô-đun CSS mà không cần thiết lập gì cả . |