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.

Common Violations

Invalid

function MyComponent() {
  return <div style="color: red;" />;
}

Valid

function MyComponent() {
  return <div style={{ color: "red" }} />;
}

Resources

• Rule Source
• Test Source

See Also

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