Về công cụ này
Công cụ CSS sang đối tượng style JS chuyển một khối CSS thành một đối tượng JavaScript phù hợp cho inline style React hoặc các thư viện CSS-in-JS như styled-components và Emotion. Nó phân tích các khai báo cục bộ trong trình duyệt của bạn — không có gì được tải lên — nên việc chuyển một stylesheet sang inline style chỉ cách một lần dán-và-sao chép.
Mỗi tên thuộc tính được camelCase: background-color trở thành backgroundColor, z-index trở thành zIndex. Các vendor prefix tuân theo quy tắc của React — một -ms- ở đầu chuyển về chữ thường ms (msFilter), trong khi -webkit-, -moz-, và -o- viết hoa thành Webkit, Moz, và O (WebkitBoxShadow). Các custom property (--brand-color) được giữ nguyên như khóa đặt trong dấu ngoặc kép. Các giá trị được phát ra dưới dạng chuỗi theo mặc định, giữ lại đơn vị và !important; một công tắc số cho phép các số nguyên và thập phân trần trở thành số không dấu ngoặc thay thế. Các khóa là định danh JavaScript hợp lệ được để không dấu ngoặc; phần còn lại được đặt dấu ngoặc tự động.
Khi đầu vào là một khối khai báo thuần (không có selector) nó tạo ra một đối tượng phẳng, hoàn hảo cho một prop style React. Khi đầu vào chứa các rule đầy đủ với selector, chế độ styled/Emotion phát ra một đối tượng lồng nhau được đánh khóa theo mỗi chuỗi selector — cú pháp đối tượng mà các thư viện đó chấp nhận. Bạn kiểm soát tên const của output, và toàn bộ được viết dưới dạng const styles = { ... }; sẵn sàng để dán.