Um Inline-Stile auf einem Element in JSX hinzuzufügen, müssen Sie dies in dieser Objekt-Syntax tun, so wie
<div style={{
fontSize: 16,
marginBottom: "1rem"
}}>
Content
</div>Das mag uns, die wir an die CSS-Syntax gewöhnt sind, ein wenig komisch vorkommen, wo es font-size (nicht fontSize), margin-bottom (nicht marginBottom) und Semikolons (nicht Kommas) gibt.
Das ist nicht JSX (oder React oder was auch immer), das seltsam ist – das ist einfach, wie Styles in JavaScript sind. Wenn Sie font-size aus irgendeinem anderen JavaScript setzen wollten, müssten Sie
div.style.fontSize = "16px";Das sage ich, aber andere APIs wollen, dass Sie die CSS-Syntax verwenden, wie zum Beispiel
window.getComputedStyle(document.body)
.getPropertyValue("font-size");Es gibt auch viele CSS-in-JS-Bibliotheken, die entweder das Setzen von Styles in diesem Objektformat erfordern oder optional unterstützen. Ich habe sogar gehört, dass bei Bibliotheken, die sowohl das CSS-Format (über Template-Literale) als auch das Objektformat (z.B. Emotion) unterstützen, manche Leute die Objekt-Syntax gegenüber der CSS-Syntax bevorzugen, weil sie sich in dem umgebenden JavaScript besser zu Hause fühlt und etwas weniger umständlich ist, wenn man Dinge wie Logik oder das Einfügen von Variablen macht.
Wie auch immer, der eigentliche Grund für den Beitrag ist diese kleine Website, die ich entdeckt habe, die das CSS-Format in das Objektformat umwandelt. CSS2JS
Definitiv praktisch, wenn Sie einen großen Block von Styles umwandeln mussten.
Nach Jahren des Programmierens bin ich zu dem Schluss gekommen, dass ich meinen gesamten rohen HTML-, CSS- und JS-Code so weit wie möglich zur Hand haben möchte. Das bietet die größte Kontrolle auf Kosten der Ausführlichkeit.
Einer der ersten "Vorteile" von JSX, den ich vor ein paar Jahren gelesen habe, war, dass es "sauberer und einfacher zu schreiben" sei (Paraphrase aus dem Gedächtnis), also weniger Code zu schreiben als reguläres HTML.
Haben sie nicht berücksichtigt, wie unordentlich sie CSS dadurch machen würden? Oder war CSS in JS damals so begrenzt im Umfang, dass es ihnen einfach egal war?
Es scheint, dass egal wie schlau/clever Sie Ihr System auch finden, es immer einen Preis gibt.
Interessant, dass benutzerdefinierte Eigenschaften wie –foo-bar vom Tool in keiner Weise konvertiert werden. Ich bin mir nicht sicher, was für benutzerdefinierte Eigenschaften im Objektformat erwartet würde.
Ich habe erwartet, dass es mit der Zeilenhöhe schlecht umgeht und ich hatte Recht :-(
1 wird als "1"
1px wird als 1 (Zahl)
Danke! Kennen Sie ein ähnliches Tool für den umgekehrten Weg "JS > CSS"?
Ich möchte fragen, ob es in Ordnung ist, die gesamte App mit Inline-Styles zu stylen, wenn man ein JS-Framework verwendet? Ich meine, hat das Leistungseinbußen?