CSS zu JavaScript-Objekt
CSS in JavaScript-Objekte oder JSON umwandeln: camelCase-Eigenschaften für React-Styles, CSS-in-JS und Styled Objects.
CSS zu JavaScript-Objekt wandelt CSS-Regeln oder ein style-Attribut in ein JS-Objekt oder JSON um. Eigenschaften werden in camelCase geschrieben (background-color zu backgroundColor), Herstellerpräfixe korrekt umgesetzt und px-Werte auf Wunsch als Zahl ausgegeben. Ideal für React-Inline-Styles und CSS-in-JS-Bibliotheken.
JavaScript
CSS als JavaScript-Objekt
In React, React Native und vielen CSS-in-JS-Lösungen werden Stile als Objekte notiert. Die Umwandlung von Hand ist fehleranfällig: Bindestriche, Präfixe und Einheiten müssen angepasst werden. Das Tool übernimmt diese Regeln automatisch.
| CSS | JavaScript |
|---|---|
background-color: #fff | backgroundColor: '#fff' |
padding: 16px | padding: 16 |
z-index: 10 | zIndex: 10 |
-webkit-backdrop-filter | WebkitBackdropFilter |
--accent: #2563eb | '--accent': '#2563eb' |
Für Tailwind-Projekte gibt es den CSS-zu-Tailwind-Konverter.
Häufige Fragen
Warum werden Eigenschaften in camelCase geschrieben?
In JavaScript sind Bindestriche in Objektschlüsseln nur mit Anführungszeichen möglich. React, das DOM-Objekt element.style und die meisten CSS-in-JS-Bibliotheken erwarten deshalb backgroundColor statt background-color.
Was passiert mit -webkit- und -ms-?
Aus -webkit-transition wird WebkitTransition mit großem W. Nur -ms- wird klein geschrieben (msTransition), so wie React es erwartet. CSS-Variablen wie --accent bleiben unverändert in Anführungszeichen.
Wann werden Werte zu Zahlen?
Mit der Option „Zahlen“ werden px-Werte zu Zahlen, weil React px automatisch ergänzt. Einheitenlose Eigenschaften wie zIndex, opacity oder lineHeight werden ebenfalls Zahlen. Alles andere, etwa rem oder Prozent, bleibt ein String.
Wie werden Pseudo-Klassen und Media Queries umgesetzt?
Jede Regel wird ein Eintrag mit dem Selektor als Schlüssel, Media Queries werden zu verschachtelten Objekten. Diese Struktur verstehen Bibliotheken wie Emotion, Stitches oder vanilla-extract mit kleinen Anpassungen; reine React-Inline-Styles kennen keine Pseudo-Klassen.
Stimmt etwas nicht auf dieser Seite? – wir schauen uns das an.