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 Show 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 kiểm tra bằng 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 Bạn có thể nhập nhiều tệp CSS không?Có, có thể gộp một tệp CSS này vào một tệp CSS khác và có thể thực hiện nhiều lần . Ngoài ra, nhập nhiều tệp CSS trong tệp HTML chính hoặc trong tệp CSS chính. Nó có thể được thực hiện bằng cách sử dụng từ khóa @import.
Bạn có nên có nhiều tệp CSS cho React không?Nếu bạn muốn có nhiều tệp css, hãy tiếp tục, sử dụng nhiều tệp css và không ghép nối chúng - đó không phải là một cách hiệu quả di chuyển tốt, nhưng bạn có thể . Vì bạn đang sử dụng phản ứng, nên có thể bạn đang sử dụng webpack hoặc browserify để đóng gói các tệp javascript. Bạn cũng có thể gộp css/less/sass với các công cụ tương tự.
Tốt hơn là có một hoặc nhiều tệp CSS?Chỉ có một tệp CSS sẽ tốt hơn cho thời gian tải trang của bạn , vì điều đó có nghĩa là ít yêu cầu HTTP hơn. Có một số tệp CSS nhỏ có nghĩa là việc phát triển dễ dàng hơn (ít nhất, tôi nghĩ vậy. có một tệp CSS cho mỗi mô-đun ứng dụng của bạn giúp mọi việc dễ dàng hơn). Vì vậy, có những lý do chính đáng trong cả hai trường hợp.
Có bao nhiêu cách bạn có thể thêm CSS vào React JS?9 cách triển khai CSS trong React JS . CSS tiêu chuẩn CSS nội tuyến Mô-đun CSS Bộ tiền xử lý SASS, ít hơn, kiểu, v.v. Thành phần theo kiểu Aphrodite Đường bán kính |