Zum Inhalt springen
TextArray1.41.0
100% lokal

CSS-zu-JS-Objektkonverter

Konvertieren Sie CSS-Deklarationen in ein React/JS-Inline-Objekt und wieder zurück.

Eingabe
Ausgabe
Verwandte Tools
CSS-FormatiererEntwickler-Tools
CSS-MinifierEntwickler-Tools
JSON zu TypeScriptEntwickler-Tools
HTML-zu-JSX-KonverterEntwickler-Tools
i18n SchlüsseldiffEntwickler-Tools
TOML-zu-JSON-KonverterEntwickler-Tools
CSS-zu-JS-Objektkonverter
Fügen Sie einen Block mit CSS-Deklarationen ein und erhalten Sie ein JavaScript-Stilobjekt zurück, das Sie in die Stilstütze einer React- oder Preact-Komponente einfügen können. Jede kebab-case-Eigenschaft wird zu camelCase – „background-color“ wird zu „backgroundColor“, „font-size“ zu „fontSize“ – und das Ganze wird als gültiges Objektliteral mit zwei Leerzeichen Einrückung gedruckt. Sie können reine Deklarationen oder eine vollständige Regel mit einem Selektor und geschweiften Klammern einfügen. Der Wrapping-Selektor wird für Sie entfernt, sodass das Kopieren einer Regel direkt aus DevTools problemlos funktioniert.
Der Konverter funktioniert in beide Richtungen. Wechseln Sie die Richtung zu JS-Objekt → CSS und ein Stilobjekt wird wieder zu einem gewöhnlichen prop: value; Zeilen, wobei camelCase erneut getrennt und die Anführungszeichen entfernt wurden. Dadurch ist es einfach, einen Stil aus einer Komponente in ein Stylesheet zu verschieben oder zu überprüfen, wie ein Satz Inline-Stile tatsächlich gerendert wird. Benutzerdefinierte Eigenschaften wie --brand-color behalten ihre führenden Bindestriche und bleiben in Anführungszeichen, da sie keine gültigen Bezeichner sind und Herstellerpräfixe so behandelt werden, wie React sie erwartet: -webkit-box-shadow wird zu WebkitBoxShadow, während -ms- Präfixe die msFlex-Form in Kleinbuchstaben verwenden.
Standardmäßig wird jeder Wert als String ausgegeben, was die sichere Wahl ist – Einheiten, Farben und Dinge wie line-height: 1,5 bleiben erhalten. Aktivieren Sie „Werte ohne Einheiten als Zahlen“, und reine Zahlen wie Z-Index oder Deckkraft werden stattdessen als Zahlen geschrieben, so wie Sie sie normalerweise von Hand eingeben würden. Sie können je nach Formatierungsprogramm Ihres Projekts auch einfache oder doppelte Anführungszeichen wählen.
Alles läuft in Ihrem Browser. Das von Ihnen eingefügte CSS wird niemals hochgeladen, sodass das Einfügen von Stilen aus einem privaten Designsystem oder einer internen Komponentenbibliothek auf Ihrem Computer verbleibt. Kopieren Sie das Ergebnis, laden Sie es als Datei herunter oder senden Sie es an ein anderes Tool weiter.
Häufige Fragen
Verarbeitet es eine vollständige CSS-Regel mit einem Selektor?
Ja. Fügen Sie `.button { color: red; Polsterung: 8px; }` und der Selektor und die geschweiften Klammern werden entfernt, so dass nur das Stilobjekt übrig bleibt. Bloße Deklarationen ohne geschweifte Klammern funktionieren auch.
Warum sind meine Zahlen in Anführungszeichen gesetzt?
Standardmäßig ist jeder Wert eine Zeichenfolge, sodass Einheiten und führende Nullen erhalten bleiben. Aktivieren Sie „Werte ohne Einheiten als Zahlen“ und reine Zahlen wie z-index: 10 oder opacity: 0,5 werden stattdessen als Zahlen ausgegeben.
Wie werden Herstellerpräfixe und benutzerdefinierte Eigenschaften konvertiert?
Herstellerpräfixe folgen der React-Konvention: -webkit-transition wird zu WebkitTransition, und -ms--Präfixe verwenden ein kleingeschriebenes ms. Benutzerdefinierte Eigenschaften wie --brand-color behalten ihre Bindestriche und bleiben als gültige Objektschlüssel in Anführungszeichen.
Kann es ein Objekt im JS-Stil zurück in CSS konvertieren?
Ja. Wechseln Sie die Richtung zu JS-Objekt → CSS. CamelCase-Schlüssel werden mit Bindestrichen versehen, String-Anführungszeichen werden entfernt und jede Eigenschaft wird als normales prop: value geschrieben; Linie.
Wird mein CSS irgendwo hochgeladen?
Nein. Die Konvertierung erfolgt vollständig in Ihrem Browser und ohne Serververarbeitung, sodass Stile aus einem privaten oder internen Projekt niemals Ihr Gerät verlassen.