facebook/react · error · Error

62

62

Error message

The `style` prop expects a mapping from style properties to values, not a string. For example, style={{marginRight: spacing + 'em'}} when using JSX.

What it means

React's DOM renderer throws this when the style prop is not an object. setValueForStyles(), which React calls for every 'style' prop during mount and update, first checks `styles != null && typeof styles !== 'object'` and throws immediately. HTML allows style as a string (style="margin:10px"), but React requires a JS object mapping CSS property names to values so it can diff and unset properties.

Source

Thrown at packages/react-dom-bindings/src/client/CSSPropertyOperations.js:113

    } else {
      if (__DEV__) {
        checkCSSPropertyStringCoercion(value, styleName);
      }
      style[styleName] = ('' + value).trim();
    }
  }
}

/**
 * Sets the value for multiple styles on a node.  If a value is specified as
 * '' (empty string), the corresponding style property will be unset.
 *
 * @param {DOMElement} node
 * @param {object} styles
 */
export function setValueForStyles(node, styles, prevStyles) {
  if (styles != null && typeof styles !== 'object') {
    throw new Error(
      'The `style` prop expects a mapping from style properties to values, ' +
        "not a string. For example, style={{marginRight: spacing + 'em'}} when " +
        'using JSX.',
    );
  }
  if (__DEV__) {
    if (styles) {
      // Freeze the next style object so that we can assume it won't be
      // mutated. We have already warned for this in the past.
      Object.freeze(styles);
    }
  }

  const style = node.style;

  if (prevStyles != null) {
    if (__DEV__) {
      validateShorthandPropertyCollisionInDev(prevStyles, styles);

View on GitHub (pinned to eafeac097b)

Solutions

1. Change style to an object: style={{marginRight: spacing + 'em'}} with camelCased property names
2. If the CSS arrives as a string from an API, parse it into an object before rendering (small styleToObject helper or a library like style-to-object)
3. Make sure spreads ({...props}) do not carry a string style from data or templates
4. Use hyphenated keys in quotes for vendor properties: style={{'--theme-color': x, WebkitTransform: y}}

Example fix

// before
<div style="margin: 10px; color: red">text</div>

// after
<div style={{margin: '10px', color: 'red'}}>text</div>

function isStyleObject(style) {
  return style == null || (typeof style === 'object' && !Array.isArray(style));
}
// before render:
{isStyleObject(props.style) ? <div style={props.style}/> : <div style={parseStyleString(props.style)}/>}

function assertStyleProp(style: unknown): React.CSSProperties | null | undefined {
  if (style == null) return style;
  if (typeof style !== 'object') {
    throw new TypeError(`style must be an object, got ${typeof style}`);
  }
  return style as React.CSSProperties;
}

Not useful: this throws during React's commit phase inside render — catch it at the data boundary instead and normalize style before it reaches JSX.

When it happens

Trigger: Rendering <div style="color:red">, spreading a props object whose style is a template string (style={cssText}), or passing a number/serialized value. Happens on both initial mount and updates, and identically for custom elements, because both setProp paths route 'style' to setValueForStyles.

Common situations: Converting copy-pasted HTML into JSX; CMS/server APIs returning CSS text that is fed straight to style; codemods or template languages (HTL/EJS) that keep HTML string attributes; upgrading from string-inline HTML to components.

Related errors

• 61
• 60
• 137
• A React form was unexpectedly submitted. If you called form.
• 91

AI-assisted analysis of facebook/react@eafeac097b (2026-08-21). Data as JSON: /api/errors/aeb93edf13ea2d65. Report an issue: GitHub.