style
Apply inline CSS from a JavaScript object with camelCased properties and automatic px units.
<div style={{ fontWeight: 'bold', margin: 20 }} />Parameters
| Parameter | Type | Description |
|---|---|---|
$styleoptional | object | An object of CSS declarations. Property names are camelCased (fontWeight, not font-weight); values are strings or numbers. A number gets px appended unless the property is unitless. Custom properties keep their --dashed-name spelling. |
Errors
React throws if style is given a string: "The `style` prop expects a mapping from style properties to values, not a string."
style takes an object, not a CSS string. The outer braces open a JSX expression and the inner ones are the object literal — that is all the famous double braces are.
When to reach for it
- Values only known at runtime: a progress bar width, a computed transform, a colour from data.
- Everything static belongs in a stylesheet behind a class; inline styles cannot express hover, media queries, or pseudo-elements, and they are not cached.
The unit rule
Property names are camelCased, so font-weight becomes fontWeight and vendor prefixes become WebkitTransform (capital W) while ms stays lowercase. A numeric value gets px appended automatically — but only for properties that take a length. Unitless properties such as lineHeight, opacity, zIndex, flexGrow and fontWeight keep the bare number. Anything in another unit must be a string: width: '50%', not width: 50.
What trips people up
An object literal written inline is a new object on every render, so a memoized child always sees a changed prop. Hoist constant style objects out of the component.
CSS custom properties are the exception to camelCasing: write '--accent' exactly as authored.
Example
When to use it
- Sizing a progress bar from a percentage held in state
- Positioning a tooltip at coordinates measured from the DOM
- Setting a category colour that comes from API data
- Passing a CSS custom property down so a stylesheet can theme a subtree
Frequently asked questions
Why are there two sets of braces in style={{ }}?
The outer braces are the JSX expression slot and the inner ones are an ordinary JavaScript object literal. It is not special syntax — style={myObject} with a single pair works identically.
Why did my number turn into px?
React appends px to numeric values for properties that accept a length, so width: 50 becomes 50px. For any other unit pass a string, such as '50%' or '2rem'; unitless properties like opacity and lineHeight are left alone.
Can I use hover or media queries with the style prop?
No — inline styles hold single declarations only, with no selectors. Use a class in a stylesheet, a CSS-in-JS library, or set a CSS custom property inline and write the pseudo-class rule in CSS.
More examples
Splitting static styling from dynamic styling
Only the one value that changes lives inline; the colour, transition and border radius of the fill sit in the .progress-fill class in a stylesheet. Note the template literal — a percentage has to be a string, because width: 42 would render as 42px. The track object is hoisted to module scope so the three Progress instances share it.
const TRACK = { height: 8, background: "#e5e7eb", borderRadius: 4 };
function Progress({ percent }) {
return (
<div style={TRACK} role="progressbar" aria-valuenow={percent}>
<div
className="progress-fill"
style={{ width: `${percent}%` }}
/>
</div>
);
}
export default function Upload() {
return (
<div>
<Progress percent={0} />
<Progress percent={42} />
<Progress percent={100} />
</div>
);
}Theming a subtree with custom properties
Custom properties are the one case where the key is not camelCased — React passes --bg and --fg through verbatim via setProperty. Because they cascade, every stylesheet rule inside the panel can read var(--bg) without any of the nested components knowing which theme is active, which is far cheaper than threading colour props down the tree.
const THEMES = {
light: { "--bg": "#ffffff", "--fg": "#111827" },
dark: { "--bg": "#111827", "--fg": "#f9fafb" }
};
function Panel({ theme, children }) {
return (
<div style={{ ...THEMES[theme], background: "var(--bg)", color: "var(--fg)" }}>
{children}
</div>
);
}
export default function Docs() {
return (
<>
<Panel theme="light">Light panel</Panel>
<Panel theme="dark">Dark panel</Panel>
</>
);
}
Discussion