CSS có hoạt động với React không?

Các thành phần phản ứng là các khối xây dựng của giao diện người dùng ứng dụng của chúng tôi vào năm 2020. Là các yếu tố trực quan, việc tạo kiểu cho chúng là một phần quan trọng trong cách ứng dụng thực sự đáp ứng người dùng của chúng tôi và tạo nên giao diện và cảm nhận của thương hiệu và sản phẩm của chúng tôi

Chọn phương pháp phù hợp để tạo kiểu cho các thành phần không phải là sự thật tuyệt đối. Đó là một lựa chọn tương đối sẽ phục vụ trường hợp sử dụng, sở thích cá nhân của bạn và trên hết là các mục tiêu kiến ​​trúc theo cách bạn làm việc. Không gian tên toàn cầu, phụ thuộc, khả năng sử dụng lại, khả năng mở rộng, loại bỏ mã chết, v.v.

Trong bài đăng này, chúng tôi sẽ xem xét các cách hữu ích để tạo kiểu cho các thành phần React của bạn trong năm 2020 và cố gắng hiểu điều gì làm nên sự khác biệt của chúng. Sự lựa chọn là của bạn và vui lòng thêm kinh nghiệm, hiểu biết và đề xuất của riêng bạn

Mẹo. Dễ dàng sử dụng lại các thành phần React trên các ứng dụng bằng Bit (GitHub). Xây dựng nhanh hơn, một mình hoặc theo nhóm, giữ cho giao diện người dùng của bạn nhất quán và người dùng của bạn hài lòng. Nó thậm chí còn hoạt động với GitHub và NPM để nâng cao quy trình làm việc của bạn. Dùng thử miễn phí

Dễ dàng sử dụng lại các thành phần trên các ứng dụng, luôn đồng bộ hóa

Cũng đọc

Cách chúng tôi xây dựng hệ thống thiết kế và cách chúng tôi xây dựng giao diện vi mô

1. CSS nội tuyến

React cho phép bạn thêm CSS nội tuyến, được viết dưới dạng thuộc tính và được chuyển đến các phần tử

Trong React, kiểu nội tuyến không được chỉ định dưới dạng chuỗi. Thay vào đó, chúng được chỉ định với một đối tượng có khóa là phiên bản camelCased của tên kiểu và giá trị của nó là giá trị của kiểu, thường là một chuỗi

Thuộc tính style chấp nhận đối tượng JavaScript có thuộc tính camelCased thay vì chuỗi CSS. Điều này phù hợp với thuộc tính DOM style JavaScript, hiệu quả hơn và ngăn ngừa các lỗ hổng bảo mật XSS. Ví dụ

Bạn có thể chuyển trực tiếp kiểu dáng hoặc tạo một biến lưu trữ các thuộc tính kiểu dáng rồi chuyển nó vào phần tử. Với các kiểu nội tuyến, bạn cũng có tùy chọn kết hợp cú pháp CSS với mã JSX (một bước tiền xử lý bổ sung cú pháp XML vào JavaScript)

Cách tiếp cận này giúp dễ dàng sắp xếp các kiểu trong các thành phần và hiểu mỗi thành phần có kiểu gì. Tận dụng các khả năng của JS cũng giúp dễ dàng làm việc với kiểu dáng phức tạp hơn khi cần

2. CSS trong JS

https. //loa boong. com/vjeux/reac-css-in-js

Một khái niệm đặc biệt thú vị là sử dụng CSS trong JS để trừu tượng hóa CSS ở cấp độ thành phần, sử dụng JavaScript để mô tả các kiểu theo cách khai báo và có thể bảo trì. Với việc phát hành dự án styled-components phổ biến của Max Stoiber, ngày nay khái niệm này trở nên phổ biến hơn bao giờ hết (xem bên dưới)

Vậy đâu là sự khác biệt giữa các kiểu CSS-in-JS và Inline? . Đây là một lời giải thích đơn giản giúp mọi thứ rõ ràng hơn ở mức độ thực tế nhất có thể. CSS-in-JS gắn thẻ