UTILS.
100% di peramban
💅

CSS ke Objek Style JS

Konversi blok deklarasi CSS menjadi objek style JavaScript untuk gaya inline React, styled-components, atau Emotion, dengan properti ber-camelCase.

— keluaran muncul di sini —

Tentang alat ini

Alat CSS ke Objek Style JS mengonversi blok CSS menjadi objek JavaScript yang cocok untuk gaya inline React atau pustaka CSS-in-JS seperti styled-components dan Emotion. Ia mem-parsing deklarasi secara lokal di browser Anda — tidak ada yang diunggah — sehingga memigrasikan stylesheet ke gaya inline hanya sekali tempel-dan-salin.

Setiap nama properti di-camelCase: background-color menjadi backgroundColor, z-index menjadi zIndex. Prefiks vendor mengikuti aturan React — -ms- di depan menjadi huruf kecil ms (msFilter), sementara -webkit-, -moz-, dan -o- menjadi kapital Webkit, Moz, dan O (WebkitBoxShadow). Custom property (--brand-color) dipertahankan verbatim sebagai kunci berkutip. Nilai dihasilkan sebagai string secara default, mempertahankan unit dan !important; sakelar numerik memungkinkan bilangan bulat dan desimal telanjang menjadi angka tanpa kutip. Kunci yang merupakan pengidentifikasi JavaScript valid dibiarkan tanpa kutip; sisanya dikutip secara otomatis.

Ketika input adalah blok deklarasi biasa (tanpa selector), ia menghasilkan satu objek datar, sempurna untuk prop style React. Ketika input berisi aturan penuh dengan selector, mode styled/Emotion menghasilkan objek bersarang berkunci setiap string selector — sintaks objek yang diterima pustaka tersebut. Anda mengontrol nama const output, dan keseluruhannya ditulis sebagai const styles = { ... }; siap ditempel.

Pertanyaan yang sering diajukan

Bagaimana nama properti diubah?
Properti bertanda hubung di-camelCase (background-color ke backgroundColor). Prefiks vendor mengikuti React: -ms- menjadi prefiks ms huruf kecil, sementara -webkit-, -moz-, dan -o- menjadi Webkit, Moz, dan O. Custom property seperti --foo dipertahankan sebagai kunci berkutip.
Apakah nilai berupa angka atau string?
Secara default setiap nilai adalah string, yang selalu aman dan menjaga unit serta !important tetap utuh. Aktifkan sakelar numerik dan nilai yang murni numerik (seperti z-index: 10) dihasilkan sebagai angka tanpa kutip.
Apa perbedaan antara kedua mode?
Mode inline React menghasilkan satu objek datar dari blok deklarasi. Mode styled / Emotion menghasilkan objek bersarang berkunci string selector, sesuai sintaks objek yang diterima styled-components dan Emotion untuk beberapa aturan.
Apakah menangani aturan CSS penuh dengan selector?
Ya. Jika input berisi selector dan kurung kurawal, setiap aturan di-parsing menjadi objek bersarangnya sendiri di bawah kunci selector. Daftar deklarasi telanjang tanpa selector menghasilkan satu objek style datar.

Alat lainnya