Sări la conținut
TextArray1.41.0
Complet local

Convertor de obiecte CSS în JS

Convertiți declarațiile CSS într-un obiect în stil inline React/JS și înapoi.

Intrare
Ieșire
Instrumente conexe
Formatator CSSInstrumente pentru dezvoltatori
Minificator CSSInstrumente pentru dezvoltatori
JSON la TypeScriptInstrumente pentru dezvoltatori
Convertor HTML în JSXInstrumente pentru dezvoltatori
Diferența tastei i18nInstrumente pentru dezvoltatori
Convertor TOML în JSONInstrumente pentru dezvoltatori
Convertor de obiecte CSS în JS
Lipiți un bloc de declarații CSS și obțineți înapoi un obiect de stil JavaScript, gata să fie introdus în suportul de stil al unei componente React sau Preact. Fiecare proprietate kebab-case devine camelCase — culoarea de fundal se transformă în backgroundColor, font-size în fontSize — și totul este tipărit ca un obiect literal valid cu indentare în două spații. Puteți lipi declarații simple sau o regulă completă cu un selector și acolade; selectorul de împachetare este eliminat pentru dvs., așa că copierea unei reguli direct din DevTools funcționează.
Convertorul merge în ambele sensuri. Comutați direcția către obiect JS → CSS și un obiect de stil se transformă înapoi în prop obișnuit: valoare; linii, cu camelCase din nou cu cratima și ghilimelele șir eliminate. Acest lucru face ușor să mutați un stil dintr-o componentă într-o foaie de stil sau să verificați cum este redat de fapt un set de stiluri inline. Proprietățile personalizate precum --brand-color își păstrează liniuțele principale și rămân citate, deoarece nu sunt identificatori validi, iar prefixele furnizorului sunt gestionate așa cum le așteaptă React: -webkit-box-shadow devine WebkitBoxShadow, în timp ce prefixele -ms- folosesc forma msFlex minuscule.
În mod implicit, fiecare valoare este emisă ca șir, care este alegerea sigură - păstrează intacte unitățile, culorile și lucruri precum înălțimea liniei: 1,5. Activați „Valori fără unități ca numere”, iar numerele pure, cum ar fi indexul z sau opacitatea, sunt scrise ca numere, potrivindu-se cu modul în care le-ați introduce de obicei manual. De asemenea, puteți alege ghilimele simple sau duble pentru a se potrivi cu formatatorul proiectului dvs.
Totul rulează în browserul tău. CSS-ul pe care îl inserați nu este încărcat niciodată, așa că lipirea stilurilor dintr-un sistem de design privat sau dintr-o bibliotecă de componente internă rămâne pe computer. Copiați rezultatul, descărcați-l ca fișier sau trimiteți-l către alt instrument.
FAQ
Se ocupă de o regulă CSS completă cu un selector?
Da. Lipiți `.button { culoare: roșu; umplutură: 8px; }` și selectorul și acolade sunt îndepărtate, lăsând doar obiectul de stil. Declarațiile goale fără bretele funcționează și ele.
De ce sunt numerele mele cuprinse între ghilimele?
În mod implicit, fiecare valoare este un șir, astfel încât unitățile și zerourile inițiale supraviețuiesc. Activați „Valori fără unități ca numere” și numere pure precum indexul z: 10 sau opacitatea: 0,5 sunt emise în schimb ca numere.
Cum sunt convertite prefixele de furnizor și proprietățile personalizate?
Prefixele furnizorului urmează convenția React: -webkit-transition devine WebkitTransition, iar prefixele -ms- folosesc litere mici ms. Proprietățile personalizate precum --brand-color își păstrează liniuțele și rămân citate ca chei de obiect valide.
Poate converti un obiect în stil JS înapoi în CSS?
Da. Comutați direcția către obiect JS → CSS. Cheile camelCase sunt liniute, ghilimele sunt eliminate și fiecare proprietate este scrisă ca o prop normal: valoare; linia.
CSS-ul meu este încărcat undeva?
Nu. Conversia rulează în întregime în browser-ul dvs., fără procesare de server, astfel încât stilurile dintr-un proiect privat sau intern nu părăsesc dispozitivul dvs.