JSX Style Objects — Converting CSS to React Inline Styles
In JSX, the style attribute takes a JavaScript object instead of a CSS string. This guide explains how to convert CSS properties to JSX style objects, handle units, vendor prefixes, and avoid common mistakes.
HTML to JSX Converter
Convert HTML to valid JSX — transforms attributes, inline styles, comments, void elements, event handlers, and SVG attributes.
Examples
HTML Input
JSX Output
<div className="container"> <h1 className="title">Hello World</h1> <p className="text-gray-500">Welcome to my app.</p> </div>
Changes Made
class→className×3HTML → JSX Quick Reference
| HTML | JSX | Why |
|---|---|---|
| class="..." | className="..." | "class" is a reserved word in JavaScript |
| for="..." | htmlFor="..." | "for" is a reserved word in JavaScript |
| style="color: red" | style={{ color: 'red' }} | JSX styles are objects, not strings |
| <!-- comment --> | {/* comment */} | JSX uses JS comment syntax |
| <br> | <br /> | JSX requires self-closing void tags |
| <img ...> | <img ... /> | All void elements must self-close |
| tabindex="0" | tabIndex="0" | JSX uses camelCase attributes |
| onclick="..." | onClick={() => {}} | Event handlers are camelCase functions |
| colspan="2" | colSpan="2" | Multi-word attributes are camelCase |
| stroke-width="2" | strokeWidth="2" | SVG attributes use camelCase in JSX |
CSS to JSX style conversion rules
Every CSS property with a hyphen becomes camelCase: background-color → backgroundColor, font-size → fontSize, border-radius → borderRadius, z-index → zIndex, box-shadow → boxShadow. Properties without hyphens stay the same: color, margin, padding, display, opacity.
Values and units
String values need quotes: fontSize: '16px', display: 'flex'. Numeric pixel values can omit 'px': fontSize: 16 is equivalent to fontSize: '16px' for most properties. However, unitless properties like lineHeight, opacity, flex, and zIndex should always be numbers: lineHeight: 1.5, opacity: 0.8, zIndex: 100.
Vendor prefixes
Vendor-prefixed properties capitalize the prefix: -webkit-transform → WebkitTransform, -moz-appearance → MozAppearance, -ms-overflow-style → msOverflowStyle. Note that ms- is lowercase (ms) while -webkit- and -moz- are uppercase (Webkit, Moz). React auto-prefixes many properties via style reconciliation.
Common pitfalls
Don't use shorthand strings for multi-value properties in objects. margin: '10px 20px' works as a string, but you can also use individual properties: marginTop: 10, marginRight: 20. Watch out for content property in pseudo-elements — inline styles can't target pseudo-elements; use CSS classes or CSS-in-JS instead.
Frequently Asked Questions
When should I use inline styles vs className in React?
Use className for static styles and inline style objects for truly dynamic values (animation positions, user-chosen colors, calculated dimensions). Avoid inline styles for hover, focus, or media query states — these require CSS classes or a CSS-in-JS library.
Can I use CSS variables in JSX style objects?
Yes — set CSS custom properties with the object syntax: style={{ '--my-color': 'blue' }}. Read them in CSS with var(--my-color). This is a powerful pattern for passing dynamic values from React to CSS.
Why does React use style objects instead of strings?
Style objects let React diff and update individual CSS properties efficiently. With strings, React would need to parse the entire style string to detect changes. Objects also provide better TypeScript support and prevent XSS via style injection.
Related Convert Tools
cURL to Code
Convert cURL commands to JavaScript, Python, Go, PHP, Ruby, and Java code instantly
JSON to CSV Converter
Convert JSON arrays to CSV with nested object flattening, column selection, and .csv download
TOML ↔ JSON/YAML
Convert between TOML, JSON, and YAML — perfect for Cargo.toml and pyproject.toml
Encode / Decode Multi-Tool
Base64, Base32, Hex, Binary, URL, and HTML encoding & decoding all in one tool