Ugrás a tartalomhoz
TextArray1.41.0
100% helyi

CSS-JS objektum konverter

Konvertálja a CSS-deklarációkat React/JS soron belüli objektummá, majd vissza.

Bemenet
Kimenet
Kapcsolódó eszközök
CSS-formázóFejlesztői eszközök
CSS-minifikálóFejlesztői eszközök
JSON-ból TypeScriptFejlesztői eszközök
HTML-JSX konverterFejlesztői eszközök
i18n kulcs diffFejlesztői eszközök
TOML-JSON konverterFejlesztői eszközök
CSS-JS objektum konverter
Illesszen be egy blokkot CSS-deklarációból, és kapjon vissza egy JavaScript-stílusobjektumot, amely készen áll arra, hogy a React vagy Preact összetevő stílusajánlatába kerüljön. Minden kebabdoboz tulajdonság camelCase-vé válik – a háttér színéből backgroundColor, a betűméretből fontSize –, és az egészet érvényes objektumként nyomtatják ki két szóköz behúzással. Beilleszthet csupasz deklarációkat vagy teljes szabályt választóval és kapcsos zárójelekkel; a burkolási választó le van vonva, így a szabály kimásolása közvetlenül a DevToolsból működik.
A konverter mindkét irányba megy. Váltsunk irányt JS objektum → CSS-re, és egy stílusobjektum visszaváltozik a szokásos prop: érték; sorok, a camelCase ismét elválasztással és a karakterlánc idézőjeleinek eltávolításával. Ez megkönnyíti a stílusok áthelyezését az összetevőkből a stíluslapba, vagy annak ellenőrzését, hogy egy soron belüli stíluskészlet valójában milyen formában jelenik meg. Az olyan egyéni tulajdonságok, mint a --brand-color, megtartják a kezdő kötőjeleket, és idézőjelben maradnak, mert nem érvényes azonosítók, és a szállítói előtagok kezelése a React elvárása szerint történik: a -webkit-box-shadow WebkitBoxShadow lesz, míg az -ms- előtagok a kisbetűs msFlex formát használják.
Alapértelmezés szerint minden érték karakterláncként kerül kiadásra, ami a biztonságos választás – érintetlenül tartja az egységeket, a színeket és például a vonalmagasságot: 1,5. Kapcsolja be az „Egység nélküli értékek számként” lehetőséget, és a tiszta számok, például a z-index vagy az átlátszatlanság helyett számokként íródnak ki, összhangban azzal, ahogyan általában kézzel gépelné őket. Választhat szimpla vagy dupla idézőjeleket is, hogy megfeleljen a projekt formázójának.
Minden a böngészőjében fut. A beillesztett CSS soha nem kerül feltöltésre, így a privát tervezési rendszerből vagy egy belső komponenskönyvtárból beillesztett stílusok a gépen maradnak. Másolja az eredményt, töltse le fájlként, vagy küldje el egy másik eszközre.
Gyakori kérdések
Teljes CSS-szabályt kezel szelektorral?
Igen. Paste `.button { szín: piros; padding: 8px; }`, valamint a választó és a kapcsos zárójelek lecsupaszítva, csak a stílusobjektum marad meg. A csupasz nyilatkozatok kapcsos zárójelek nélkül is működnek.
Miért vannak a számaim idézőjelben?
Alapértelmezés szerint minden érték egy karakterlánc, így az egységek és a kezdő nullák megmaradnak. Kapcsolja be az „Egység nélküli értékek számként” beállítást, és helyette a rendszer számként jeleníti meg az olyan tiszta számokat, mint a z-index: 10 vagy az átlátszatlanság: 0,5.
Hogyan konvertálják a szállítói előtagokat és az egyéni tulajdonságokat?
A szállítói előtagok követik a React konvencióját: -webkit-transition lesz WebkitTransition, az -ms- előtagok pedig kisbetűs ms-t használnak. Az olyan egyéni tulajdonságok, mint a --brand-color, megtartják kötőjeleiket, és érvényes objektumkulcsként idézőjelek maradnak.
Vissza lehet konvertálni egy JS stílusú objektumot CSS-vé?
Igen. Váltson irányt a JS objektum → CSS lehetőségre. A camelCase kulcsok kötőjellel vannak elválasztva, a karakterlánc idézőjelek eltávolításra kerülnek, és minden tulajdonság normál prop: value; vonal.
Fel van töltve valahova a CSS-em?
Nem. Az átalakítás teljes egészében a böngészőben fut, szerver feldolgozás nélkül, így a privát vagy belső projektekből származó stílusok soha nem hagyják el az eszközt.