Processed in your browser. Your data never leaves your device.

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

Wrap in component

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×3

HTML → 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.

// JSX inline styles — CSS properties become camelCase
const styles = {
  backgroundColor: "#1a1a2e",    // background-color
  fontSize: "16px",               // font-size
  fontWeight: "bold",             // font-weight
  borderRadius: "8px",            // border-radius
  padding: "12px 24px",           // shorthand works
  boxShadow: "0 2px 4px rgba(0,0,0,0.1)",
  zIndex: 10,                     // unitless number
  WebkitTransform: "rotate(45deg)", // vendor prefix
};

<div style={styles}>Styled content</div>
<div style={{ display: "flex", gap: "1rem" }}>Inline</div>

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

%20

URL Encoder & Decoder

Encode and decode URLs with encodeURIComponent and encodeURI

YML

JSON ↔ YAML Converter

Convert between JSON and YAML for Kubernetes, Docker, and CI/CD configs

HTML Entity Encoder

Encode and decode HTML entities, special characters, and symbols

IMG

Image to Base64

Convert images to Base64 data URIs or decode Base64 back to images