Preskoči na vsebino
TextArray1.41.0
100% lokalno

Pretvornik predmetov CSS v JS

Pretvorite deklaracije CSS v objekt v slogu React/JS in nazaj.

Vhod
Izhod
Povezana orodja
Oblikovalnik CSSOrodja za razvijalce
Minifier CSSOrodja za razvijalce
JSON v TypeScriptOrodja za razvijalce
Pretvornik HTML v JSXOrodja za razvijalce
i18n tipka difOrodja za razvijalce
Pretvornik TOML v JSONOrodja za razvijalce
Pretvornik predmetov CSS v JS
Prilepite blok deklaracij CSS in pridobite nazaj slogovni objekt JavaScript, pripravljen za vnos v slogovno podlago komponente React ali Preact. Vsaka lastnost kebab-case postane camelCase — barva ozadja se spremeni v BackgroundColor, velikost pisave v fontSize — in vse skupaj se natisne kot veljaven predmetni literal z zamikom dveh presledkov. Prilepite lahko gole deklaracije ali celotno pravilo z izbirnikom in oklepaji; izbirnik ovoja je odstranjen za vas, tako da kopiranje pravila naravnost iz DevTools preprosto deluje.
Pretvornik gre v obe smeri. Preklopite smer na objekt JS → CSS in slogovni objekt se spremeni nazaj v navaden prop: value; vrstice, pri čemer so kamelje velike in male črke spet vezane in narekovaji nizov odstranjeni. To olajša premikanje sloga iz komponente v tabelo s slogi ali preverjanje, v kakšni obliki je dejansko upodobljen nabor vgrajenih slogov. Lastnosti po meri, kot je --brand-color, ohranijo svoje vodilne pomišljaje in ostanejo v navedbah, ker niso veljavni identifikatorji, predpone prodajalca pa se obravnavajo tako, kot jih pričakuje React: -webkit-box-shadow postane WebkitBoxShadow, medtem ko predpone -ms- uporabljajo obliko msFlex z malimi črkami.
Privzeto je vsaka vrednost oddana kot niz, kar je varna izbira - enote, barve in stvari, kot je line-height: 1,5, ostanejo nedotaknjene. Vklopite »Vrednosti brez enot kot števila« in čiste številke, kot je z-indeks ali motnost, bodo namesto tega zapisane kot številke, ki se ujemajo s tem, kako bi jih običajno ročno vnesli. Izberete lahko tudi enojne ali dvojne narekovaje, da se ujemajo z oblikovalnikom vašega projekta.
Vse teče v vašem brskalniku. CSS, ki ga prilepite, se nikoli ne naloži, tako da lepljenje slogov iz zasebnega oblikovalskega sistema ali notranje knjižnice komponent ostane na vašem računalniku. Kopirajte rezultat, ga prenesite kot datoteko ali pošljite drugemu orodju.
FAQ
Ali obravnava celotno pravilo CSS z izbirnikom?
ja Prilepi `.button { barva: rdeča; oblazinjenje: 8px; }` in izbirnik ter oklepaji so odstranjeni, tako da ostane samo slogovni objekt. Delujejo tudi gole deklaracije brez oklepajev.
Zakaj so moje številke zavite v narekovaje?
Privzeto je vsaka vrednost niz, zato enote in vodilne ničle preživijo. Vklopite »Vrednosti brez enot kot števila« in čiste številke, kot je z-index: 10 ali motnost: 0,5, bodo namesto tega oddane kot številke.
Kako se pretvorijo predpone prodajalca in lastnosti po meri?
Predpone prodajalca sledijo Reactovi konvenciji: -webkit-transition postane WebkitTransition, predpone -ms- pa uporabljajo male črke ms. Lastnosti po meri, kot je --brand-color, ohranijo pomišljaje in ostanejo navedene kot veljavni ključi predmeta.
Ali lahko objekt v slogu JS pretvori nazaj v CSS?
ja Preklopite smer na predmet JS → CSS. ključi camelCase so vezani, narekovaji nizov so odstranjeni in vsaka lastnost je zapisana kot običajni prop: value; linija.
Ali je moj CSS kje naložen?
Ne. Pretvorba poteka v celoti v vašem brskalniku brez obdelave strežnika, tako da slogi iz zasebnega ali internega projekta nikoli ne zapustijo vaše naprave.