To add inline styles on an element in JSX, you have to do it in this object syntax, like:
<div style={{
fontSize: 16,
marginBottom: "1rem"
}}>
Content
</div>That might look a little weird to us folks who are so used to the CSS syntax, where it is font-size (not fontSize), margin-bottom (not marginBottom), and semi-colons (not commas).
That’s not JSX (or React or whatever) being weird — that’s just how styles are in JavaScript. If you wanted to set the font-size from any other JavaScript, you’d have to do:
div.style.fontSize = "16px";I say that, but other APIs do want you to use the CSS syntax, like:
window.getComputedStyle(document.body)
.getPropertyValue("font-size");There are also lots of CSS-in-JS libraries that either require or optionally support setting styles in this object format. I’ve even heard that with libraries that support both the CSS format (via template literals) and the object format (e.g. Emotion), that some people prefer the object syntax over the CSS syntax because it feels more at home in the surrounding JavaScript and is a bit less verbose when doing stuff like logic or injecting variables.
Anyway, the actual reason for the post is this little website I came across that converts the CSS format to the object format. CSS2JS:
Definitely handy if you had a big block of styles to convert.
After years of coding, I have come to the conclusion that I’d like all my raw HTML, CSS and JS at my finger tips as much as I can. It provides the most amount of control at the cost of verbosity.
One of the first “benefits” to JSX I ever reads a few years back was that it was “cleaner and simpler to write” (paraphrase from memory), ie less code to write than regular HTML.
Did they not take into account how messy they would make CSS while doing this? Or was CSS in JS so limited in scope back then they just didn’t care?
It seems that no matter how smart/clever you think your system is, there is always a cost.
Interesting that custom properties, such as –foo-bar are not converted in any way by the tool. Not sure what would be expected in the object syntax for custom properties.
I expected it to improperly handle line-height and I was right :(
1 goes as “1”
1px goes as 1 (number)
Thanks ! Do you know a similar tool for the other way “js > CSS” ?
I would like to ask is it ok to style your while app with inline styles in case of JS framework? I mean does it have performance setbacks?