Lewati ke konten utama
iotools.cloudiotools.cloud

Konverter CSS ke JS Style

Ubah deklarasi CSS menjadi objek React inline style, React Native StyleSheet, atau template literal styled-components/Emotion — dan ubah kembali objek JS style menjadi CSS biasa.

Input

Output

Output
Apakah ini membantu?

Cara lain menggunakan alat ini

REST API

curl -X POST https://api.iotools.cloud/v1/tool/css-to-js-style-converter \
  -H "Authorization: Bearer YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "conversionDirection": "css-to-js",
    "outputFormat": "react-inline",
    "cssInput": "background-color: #3b82f6;\nfont-size: 16px;\nopac…"
  }'

Ganti dengan kunci Anda sendiri dari akun Anda. Bidang alat menjadi isi permintaan — tanpa pembungkus.

Tanyakan ke agen AI

Use the IOTools `css-to-js-style-converter` tool (CSS to JS Style Converter) on this input:

YOUR_INPUT_HERE

Tempelkan ini ke agen mana pun yang terhubung ke server MCP IOTools, lalu tambahkan input Anda.

Widget sematan

<iframe
  src="https://iotools.cloud/embed/css-to-js-style-converter/"
  width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
  title="Konverter CSS ke JS Style — iotools.cloud"
  sandbox="allow-scripts allow-forms allow-same-origin allow-downloads allow-popups allow-popups-to-escape-sandbox"
  allow="clipboard-write"
  style="width:100%;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden"></iframe>
<script src="https://iotools.cloud/embed.js" async></script>

Tempelkan ini di halaman Anda sendiri — gratis, tanpa kunci, cukup tautan balik.

Biaya per panggilan API/MCPMulai dari 5 kredit
Butuh kredit lebih?Lihat harga

Juga tersedia melalui

IntegrasiEkstensi browserEkstensi VS Code

Panduan

Apa yang dilakukan tool ini

Tempel blok deklarasi CSS dan dapatkan kembali objek JavaScript style siap pakai — atau sebaliknya, ubah objek JS style menjadi CSS biasa. Tool ini menargetkan tiga cara CSS muncul dalam kode UI JavaScript modern, masing-masing dengan aturan berbeda untuk nama properti dan nilai:

  • React Inline Style — objek biasa dengan kunci camelCase (backgroundColor, fontSize) untuk prop style. Nilai piksel numerik dikonversi ke angka polos di mana React otomatis menambahkan px (fontSize: 16), sementara properti unitless seperti opacity dan fontWeight tetap numerik karena CSS sendiri memperlakukannya sebagai unitless.
  • React Native StyleSheet — konversi camelCase yang sama, dibungkus dalam StyleSheet.create({ container: { ... } }). Properti tata letak (width, margin, padding, borderRadius, fontSize, dan teman-temannya) memiliki akhiran px mereka dihilangkan karena pengukuran React Native adalah angka unitless sesuai konvensi.
  • styled-components / Emotion — template literal dengan tag (const styles = css`...`;). Tidak seperti dua format lainnya, nama properti tetap dalam kebab-case asli mereka dan nilai disalin verbatim — styled-components dan Emotion mengurai sintaks CSS nyata di dalam template literal, jadi tidak ada konversi camelCase atau coercion numerik yang terjadi di sini.

Mengganti Arah Konversi ke JavaScript → CSS membalikkan proses: tempel objek JS style (kunci quoted atau unquoted, nilai string atau numerik) dan dapatkan kembali baris CSS standar property: value;. Nilai numerik diperluas kembali ke piksel kecuali properti adalah salah satu yang unitless (opacity, zIndex, flex, lineHeight, dll.), yang ditulis kembali sebagai angka biasa.

Cara menggunakannya

  1. Pilih Arah Konversi — CSS → JavaScript atau JavaScript → CSS.
  2. Untuk CSS → JavaScript, pilih Format Output: React Inline Style, React Native StyleSheet, atau styled-components/Emotion.
  3. Tempel deklarasi CSS Anda (atau objek JS style) ke dalam kotak input, baik sebagai baris property: value; yang longgar atau dibungkus dalam blok selector { ... }.
  4. Output diperbarui secara otomatis saat Anda mengetik.

FAQ

Mengapa font-size: 16px menjadi fontSize: 16 di React tetapi tetap font-size: 16px di styled-components? Prop style inline React memperlakukan angka polos pada sebagian besar properti sebagai piksel, jadi tool menghilangkan px. styled-components dan Emotion merender teks CSS literal, jadi unit harus tetap ada.

Properti mana yang menyimpan px mereka di React Native? Hanya yang diharapkan React Native untuk angka: dimensi, spacing (margin*, padding*), offset posisi, lebar/radius batas, fontSize, letterSpacing, dan properti gap. Yang lain dikutip sebagai string.

Apakah itu menangani properti dengan prefiks vendor? Ya — prefiks -webkit-, -moz-, -ms-, dan -o- dikonversi ke ekuivalen JS mereka (WebkitTransform, MozTransform, msTransform, OTransform) dan sebaliknya.

Apakah itu memahami pemilih CSS lengkap atau aturan bersarang? Tidak — hanya membaca deklarasi, baik diketik longgar atau dibungkus dalam satu blok { ... }. Pemilih, media query, dan aturan bersarang tidak diuraikan.

Apa yang terjadi pada properti kustom CSS (--my-var)? Deklarasi yang mendefinisikan properti kustom (dimulai dengan --) dilewati dalam arah CSS → JS; menggunakan var(--my-var) sebagai nilai dipertahankan apa adanya.

Privasi

Tool ini berjalan sepenuhnya di browser Anda — CSS dan JavaScript Anda tidak pernah meninggalkan perangkat Anda atau menyentuh server.

cssjavascriptreactreact-nativestyled-componentsemotioncss-in-jsconverter

Suka alat-alatnya? Hilangkan iklannya.

Satu kali pembayaran menghapus semua iklan dari akun Anda, selamanya. Tanpa langganan, tanpa pelacakan.

Hapus iklan