ตัวแปลง CSS เป็น JavaScript Object
แปลง CSS declarations เป็น JavaScript style object สำหรับ React, JSS หรือ CSS-in-JS พร้อม key แบบ camelCase และค่า unitless แบบตัวเลข ฟรี
Loading tool...
ตัวแปลง CSS เป็น JavaScript Object คืออะไร?
ตัวแปลง CSS เป็น JavaScript Object เป็นเครื่องมือฟรีในเบราว์เซอร์ที่เปลี่ยน CSS declarations เป็น JavaScript style object: object แบบแบน camelCase สำหรับ React inline styles, object แยกตาม selector หรือ template literal แบบ CSS-in-JS
ประโยชน์หลัก
- ย้าย CSS ไปใส่ React style props โดยไม่ต้องพิมพ์พร็อพเพอร์ตี้ใหม่ด้วยมือ
- ได้ key แบบ camelCase และค่าตัวเลขแบบ unitless ที่ถูกต้องทุกครั้ง
- เห็นคำเตือนเมื่อมี declaration ซ้ำหรือผิดรูปแบบ แทนการข้อมูลหายเงียบ ๆ
- เป็นส่วนตัว: ประมวลผลทั้งหมดในเบราว์เซอร์ของคุณ ไม่มีการอัปโหลด
กรณีการใช้งาน
- •แปลง snippet จาก stylesheet เป็น React style object
- •สร้าง style dictionary สำหรับ component library และ design tokens
- •เตรียมบล็อก styled-components หรือ JSS จาก CSS ที่มีอยู่
- •ตรวจ CSS หาพร็อพเพอร์ตี้ที่ซ้ำก่อน refactor
วิธีใช้ตัวแปลง CSS เป็น JavaScript Object
- วาง CSS: วาง stylesheet หรือ snippet ลงในช่องอินพุต หรือกดโหลดตัวอย่าง CSS เพื่อทดลองใช้
- เลือกรูปแบบผลลัพธ์: React inline style สำหรับ style props, object แยกตาม selector สำหรับ style dictionary หรือ template literal สำหรับ styled-components
- ตรวจผลลัพธ์ JavaScript: ดู key แบบ camelCase ค่าตัวเลขแบบ unitless และคำเตือนเรื่อง declaration ที่ซ้ำหรือผิดรูปแบบ
- คัดลอกหรือดาวน์โหลด: คัดลอก object ไปยังคลิปบอร์ดหรือดาวน์โหลดเป็น styles.js ทำงานทั้งหมดในเบราว์เซอร์ของคุณ
คุณสมบัติหลัก
- สามรูปแบบผลลัพธ์: React inline-style object, object แยกตาม selector และ template literal
- แปลง key แบบ camelCase ได้ถูกต้องแม้พร็อพเพอร์ตี้นำหน้าด้วย -webkit และ -moz
- พร็อพเพอร์ตี้แบบ unitless เช่น z-index, opacity และ font-weight จะเป็นตัวเลข
- Declaration ที่ซ้ำรวมแบบตัวสุดท้ายชนะตาม cascade ของ CSS พร้อมคำเตือนทุกครั้ง
- แปลงสดขณะพิมพ์ พร้อมคัดลอกและดาวน์โหลด .js - ไม่มีการอัปโหลด
คำถามที่พบบ่อย
ควรใช้รูปแบบผลลัพธ์ไหนสำหรับ React?
ใช้ React inline style object สำหรับ style props บน DOM element และ component โดย key จะเป็น camelCase (backgroundColor) และค่าแบบ unitless จะเป็นตัวเลข ตรงตามที่ React ต้องการ
พร็อพเพอร์ตี้ CSS ที่ซ้ำกันถูกจัดการอย่างไร?
เหมือน cascade ของ CSS คือค่าสุดท้ายชนะ โดยแต่ละรายการที่ซ้ำจะแสดงในรายการคำเตือน เพื่อให้คุณเห็น conflict ก่อนนำ object ไปใช้ในโค้ด
แปลง keyframes และ pseudo-elements ได้หรือไม่?
Selector อย่าง ::before จะถูกแปลงในรูปแบบ object แยกตาม selector และบล็อก @-rule จะถูกปรับให้แบนพร้อมคำเตือน ส่วน timeline ของ keyframe ที่ซับซ้อนควรเขียนใน CSS หรือ CSS-in-JS library โดยตรง
CSS ของฉันถูกอัปโหลดไปที่ไหนหรือไม่?
ไม่ การ parse และสร้างผลลัพธ์ทำงานทั้งหมดในเบราว์เซอร์ของคุณด้วย JavaScript เมื่อหน้าเว็บโหลดแล้วสามารถใช้งานออฟไลน์ได้