style

style sets inline styles from either a CSS string or an object.

Syntax

<div style="color: green" />
<div style={{ color: "green" }} />

Value

• Type: string | CSSProperties

CSS string or style object.

Behavior

• String values are written as inline CSS text.
• Object values are applied property by property with element.style.setProperty, so keys should use lower-case, dash-separated CSS property names instead of camelCase. CSS custom properties can use keys such as --my-color.
• Nullish values in a style object remove that property, and falsy overall style values remove the style attribute.
• In SSR output, object values are serialized into the emitted style attribute.

Examples

CSS string

<div style={`color: green; height: ${state.height}px`} />

Style object

<div
  style={{
    color: "green",
    "background-color": state.color,
    height: `${state.height}px`,
  }}
/>

CSS variable

<div style={{ "--my-custom-color": state.themeColor }} />

Related

• classList