no-string-style-prop

Full Name in eslint-plugin-react-dom

react-dom/no-string-style-prop

Full Name in @eslint-react/eslint-plugin

@eslint-react/dom-no-string-style-prop

Presets

dom recommended strict

Rule Details

Using a string value for the style prop is not valid in React. The style prop must be an object with camelCased CSS properties. This rule helps catch incorrect string usage that would cause runtime errors.

Examples

Setting inline styles on JSX elements

function MyComponent() {
  // Problem: Passing a CSS string to the style prop causes a runtime error
  return <div style="color: red;" />;
}

function MyComponent() {
  // Recommended: Pass an object with camelCased CSS properties
  return <div style={{ color: "red" }} />;
}

Versions

Resources

• Rule Source
• Test Source
• Rule Changelog

See Also

• react-dom/no-unknown-property
  Disallows unknown DOM properties.
• react-jsx/no-namespace
  Enforces the absence of a namespace in React elements.