style property of a React DOM element should be an object

• REACT_BAD_STYLE_PROP
• Error
• High
• react

This rule applies when the style property of a React DOM element is not specified with an object.

Unlike HTML, a string representing CSS rule is not allowed as the value of a style property. If you specify a value other than object, null, or undefined, React will throw an exception.

Noncompliant Code Example

import { createRoot } from 'react-dom/client';

const root = createRoot(document.getElementById('root'));
root.render(
  <div style="color: 'red'"> {/* REACT_BAD_STYLE_PROP alarm because it is a string value. */}
    Text in red
  </div>
);

Compliant Code Example

import { createRoot } from 'react-dom/client';

const root = createRoot(document.getElementById('root'));
root.render(
  <div style={{ color: 'red' }}>
    Text in red
  </div>
);

Version

This rule was introduced in DeepScan 1.3.0-beta.

See

• Using "Double Curlies": CSS and Other Objects in JSX

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