Ga naar inhoud
TextArray1.41.0
100% lokaal

CSS naar JS-objectconverter

Converteer CSS-declaraties naar een React/JS inline-stijl object, en weer terug.

Invoer
Uitvoer
Gerelateerde tools
CSS-formatterOntwikkelaarstools
CSS-verkleinerOntwikkelaarstools
JSON naar TypeScriptOntwikkelaarstools
HTML naar JSX-converterOntwikkelaarstools
i18n sleutel diffOntwikkelaarstools
TOML naar JSON-converterOntwikkelaarstools
CSS naar JS-objectconverter
Plak een blok CSS-declaraties en krijg een object in JavaScript-stijl terug, klaar om in de stijlprop van een React- of Preact-component te plaatsen. Elke eigenschap van kebab-case wordt camelCase – background-color verandert in backgroundColor, font-size in fontSize – en het geheel wordt afgedrukt als een geldig letterlijk object met inspringing met twee spaties. U kunt kale declaraties of een volledige regel plakken met een selector en accolades; de inpakkiezer is voor u verwijderd, dus het kopiëren van een regel rechtstreeks uit DevTools werkt gewoon.
De converter gaat beide kanten op. Verander de richting naar JS-object → CSS en een stijlobject verandert weer in een gewone prop: waarde; regels, waarbij camelCase opnieuw wordt afgebroken en de tekenreeksaanhalingstekens worden verwijderd. Dat maakt het gemakkelijk om een stijl uit een component naar een stylesheet te verplaatsen, of om te controleren hoe een set inline stijlen daadwerkelijk wordt weergegeven. Aangepaste eigenschappen zoals --brand-color behouden hun leidende streepjes en blijven geciteerd, omdat ze geen geldige identificatiegegevens zijn, en leveranciersvoorvoegsels worden afgehandeld zoals React ze verwacht: -webkit-box-shadow wordt WebkitBoxShadow, terwijl -ms- voorvoegsels de kleine msFlex-vorm gebruiken.
Standaard wordt elke waarde verzonden als een tekenreeks, wat een veilige keuze is: de eenheden, kleuren en zaken als lijnhoogte: 1,5 blijven intact. Schakel 'Eenheidsloze waarden als getallen' in. Pure getallen, zoals de z-index of dekking, worden in plaats daarvan als getallen geschreven, passend bij de manier waarop u ze gewoonlijk met de hand typt. U kunt ook enkele of dubbele aanhalingstekens kiezen, afhankelijk van de formatter van uw project.
Alles draait in uw browser. De CSS die u plakt, wordt nooit geüpload, dus het plakken van stijlen uit een privéontwerpsysteem of een interne componentenbibliotheek blijft op uw computer staan. Kopieer het resultaat, download het als bestand of stuur het door naar een andere tool.
FAQ
Kan het een volledige CSS-regel verwerken met een selector?
Ja. Plak `.button { kleur: rood; opvulling: 8px; }` en de selector en accolades worden verwijderd, waardoor alleen het stijlobject overblijft. Kale declaraties zonder accolades werken ook.
Waarom staan mijn cijfers tussen aanhalingstekens?
Standaard is elke waarde een string, dus eenheden en voorloopnullen blijven bestaan. Schakel 'Eenheidsloze waarden als getallen' in en pure getallen zoals z-index: 10 of dekking: 0,5 worden in plaats daarvan als getallen verzonden.
Hoe worden leveranciersvoorvoegsels en aangepaste eigenschappen geconverteerd?
Voorvoegsels van leveranciers volgen de conventie van React: -webkit-transition wordt WebkitTransition, en -ms- voorvoegsels gebruiken een kleine letter ms. Aangepaste eigenschappen zoals --brand-color behouden hun streepjes en blijven tussen aanhalingstekens staan als geldige objectsleutels.
Kan het een object in JS-stijl terug naar CSS converteren?
Ja. Verander de richting naar JS-object → CSS. camelCase-sleutels worden afgebroken, string-aanhalingstekens worden verwijderd en elke eigenschap wordt geschreven als een normale prop: value; lijn.
Wordt mijn CSS ergens geüpload?
Nee. De conversie wordt volledig in uw browser uitgevoerd, zonder serververwerking, dus stijlen van een privé- of intern project verlaten uw apparaat nooit.