When CSS Syntax Meets JavaScript Objects
Inline styles in JSX don't follow the CSS syntax you might expect. Instead of font-size, you write fontSize; instead of semi-colons, you use commas. The whole declaration sits inside an object literal:
<div style={{
fontSize: 16,
marginBottom: "1rem"
}}>
Content
</div>That's not a quirk of JSX or React specifically—it's how styles work in plain JavaScript. If you're setting a style property from any JavaScript context, the same camelCase naming applies:
div.style.fontSize = "16px";Yet not every API follows that convention. Some interfaces expect the classic CSS format:
window.getComputedStyle(document.body)
.getPropertyValue("font-size");The object format also shows up across CSS-in-JS libraries. Some, like Emotion, support both template-literal CSS and object styles. In practice, some developers prefer the object syntax for those libraries, since it feels more natural alongside JavaScript logic and variable injection, and it tends to be less verbose.
If you regularly switch between the two formats, a small utility called CSS2JS converts CSS syntax into the object format:
That's convenient when you have a large block of styles to move over.
