Lewati ke konten utama
iotools.cloudiotools.cloud

Konverter CSS ke JS

Konversi deklarasi CSS menjadi objek gaya JS (React inline style, React Native StyleSheet, styled-components, Emotion, atau objek biasa) — dan sebaliknya dari JS ke CSS.

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-converter \
  -H "Authorization: Bearer YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "direction": "css-to-js",
    "cssInput": ".container {\n  display: flex;\n  background-color…",
    "outputFormat": "react"
  }'

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-converter` tool (CSS to JS 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-converter/"
  width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
  title="Konverter CSS ke JS — 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 alat ini

CSS-in-JS libraries dan React tidak menerima sintaks CSS biasa — mereka menginginkan objek JavaScript tempat properti adalah camelCase dan nilai adalah string yang dikutip (sebagian besar). Alat ini mengonversi deklarasi CSS yang sudah Anda miliki — disalin dari stylesheet, ekspor alat desain, atau ditulis dengan tangan — ke bentuk objek itu, dan dapat mengonversi arah lain juga: tempel objek gaya JS dan dapatkan CSS biasa kembali.

Mendukung lima format output CSS-ke-JS:

  • React Inline Style — objek const styles = { ... } biasa, siap untuk style={styles}.
  • React Native StyleSheet — dibungkus dalam StyleSheet.create({ container: { ... } }), dengan unit px dihilangkan menjadi angka biasa (React Native tidak memiliki string unit).
  • styled-components — literal template berlabel (styled.div\...``), yang mempertahankan CSS kebab-case asli Anda, karena styled-components menerima sintaks CSS nyata.
  • Emotion css Prop — bentuk objek camelCase yang sama seperti React, dibungkus dalam css({ ... }).
  • Objek JS Biasa — hanya literal objek, tanpa deklarasi variabel di sekitarnya, untuk ditempel ke kode Anda sendiri.

Cara menggunakannya

  1. Pilih Arah: "CSS ke JS" (default) atau "JS ke CSS".
  2. Tempel deklarasi CSS Anda (blok aturan lengkap seperti .card { ... } atau baris property: value; biasa kedua-duanya berfungsi) — atau, untuk JS ke CSS, tempel objek gaya JS.
  3. Untuk CSS ke JS, pilih Format Output dari lima opsi di atas.
  4. Kode yang dikonversi muncul secara instan di kotak output. Salin atau unduh sebagai styles.js.

Detail konversi

  • Nama properti mengonversi kebab-case ke camelCase (background-color → backgroundColor) dan kembali.
  • Properti dengan awalan vendor mengikuti konvensi React: -webkit-transform → WebkitTransform, -ms-overflow-style → msOverflowStyle (huruf kecil ms, tidak seperti awalan lain).
  • Properti kustom CSS (--my-color) dibiarkan tidak berubah dan dikutip sebagai kunci objek.
  • Nilai numerik biasa (z-index: 10, line-height: 1.5) menjadi angka JS yang tidak dikutip; semuanya yang lain menjadi string yang dikutip tunggal. React Native juga mengonversi nilai px seperti padding: 16px ke angka biasa 16.
  • Urutan deklarasi dalam input Anda dipertahankan dalam output.

FAQ

Apakah ini menangani aturan CSS lengkap, atau hanya deklarasi biasa? Keduanya. Tempel aturan lengkap (.container { display: flex; ... }) dan selectornya secara otomatis dihilangkan, atau tempel hanya deklarasi yang dipisahkan dengan titik koma di mereka sendiri.

Apa yang dihasilkan "JS ke CSS"? Blok .selector { ... } tunggal dengan kunci camelCase dikonversi kembali ke kebab-case. Nilai disalin apa adanya, karena alat tidak dapat mengetahui unit apa yang dimaksudkan untuk angka biasa.

Mengapa output styled-components terlihat berbeda dari format lain? styled-components' template berlabel menerima sintaks CSS nyata, jadi format itu mempertahankan nama dan nilai properti asli Anda secara verbatim daripada mengonversi ke objek JS.

Apakah itu akan memvalidasi CSS atau sintaks JS saya? Tidak — ini adalah parser ringan, bukan parser CSS/JS penuh. Input yang salah format diparse best-effort; jika tidak ada yang berguna ditemukan, output menjelaskan itu daripada gagal diam-diam.

Privasi

Semua konversi terjadi secara lokal di browser Anda. Tidak ada apa pun yang Anda tempel yang diupload atau disimpan.

cssjavascriptreactreact nativestyled-componentsemotionconverterdeveloper

Suka alat-alatnya? Hilangkan iklannya.

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

Hapus iklan