React DOM element's `style` property name or value should not be wrong

REACT_BAD_STYLE_OBJ_PROPERTY
Error
Medium
react

This rule applies when React DOM element's style object property name or value is wrong.

React outputs a warning message for the following cases of wrong style property name or value:

Hyphenated property name
Non-capitalized vendor prefixes such as webkit, moz, and o
Property value having semicolon at the end
NaN property value

Although hyphenated names way work, it is not React standard and some features like cross-browser compatibility may not be applied.

-Noncompliant Code Example
+Compliant Code Example
 import { createRoot } from 'react-dom/client';
 const root = createRoot(document.getElementById('root'));
 root.render(
   <>
     <div style={{
-      'background-color': 'red' // REACT_BAD_STYLE_OBJ_PROPERTY alarm because 'background-color' style property has hyphen, not camelcased.
+      backgroundColor: 'red'
     }}>
       Example 1
     </div>
     <div style={{
-      webkitTransform: 'translate3d(0, 0, 0)' // REACT_BAD_STYLE_OBJ_PROPERTY alarm because the 'webkit' vendor prefix is not capitalized.
+      WebkitTransform: 'translate3d(0, 0, 0)'
     }}>
       Example 2
     </div>
     <div style={{
-      backgroundColor: 'blue;' // REACT_BAD_STYLE_OBJ_PROPERTY alarm because the value 'blue;' has semicolon at the end.
+      backgroundColor: 'blue'
     }}>
       Example 3
     </div>
     <div style={{
-      fontSize: NaN // REACT_BAD_STYLE_OBJ_PROPERTY alarm because NaN is not a valid property value
+      fontSize: '10px'
     }}>
       Example 4
     </div>
   </>
 );

Noncompliant Code Example

View with compliant examples side by side

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

const root = createRoot(document.getElementById('root'));
root.render(
  <>
    <div style={{
      'background-color': 'red' // REACT_BAD_STYLE_OBJ_PROPERTY alarm because 'background-color' style property has hyphen, not camelcased.
    }}>
      Example 1
    </div>

    <div style={{
      webkitTransform: 'translate3d(0, 0, 0)' // REACT_BAD_STYLE_OBJ_PROPERTY alarm because the 'webkit' vendor prefix is not capitalized.
    }}>
      Example 2
    </div>

    <div style={{
      backgroundColor: 'blue;' // REACT_BAD_STYLE_OBJ_PROPERTY alarm because the value 'blue;' has semicolon at the end.
    }}>
      Example 3
    </div>

    <div style={{
      fontSize: NaN // REACT_BAD_STYLE_OBJ_PROPERTY alarm because NaN is not a valid property value
    }}>
      Example 4
    </div>
  </>
);

Compliant Code Example

View with noncompliant examples side by side

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

const root = createRoot(document.getElementById('root'));
root.render(
  <>
    <div style={{
      backgroundColor: 'red'
    }}>
      Example 1
    </div>

    <div style={{
      WebkitTransform: 'translate3d(0, 0, 0)'
    }}>
      Example 2
    </div>

    <div style={{
      backgroundColor: 'blue'
    }}>
      Example 3
    </div>

    <div style={{
      fontSize: '10px'
    }}>
      Example 4
    </div>
  </>
);

Version

This rule was introduced in DeepScan 1.6.0-beta.

See

React Warning: Unsupported style property background-color. Did you mean backgroundColor?
React Warning: Unsupported vendor-prefixed style property webkitTransform. Did you mean WebkitTransform?
React Warning: Style property values shouldn't contain a semicolon. Try "backgroundColor: 'blue'" instead.
React Warning: NaN is an invalid value for the fontSize css style property.

React DOM element's style property name or value should not be wrong

Noncompliant Code Example

Compliant Code Example

Version

See

Was this documentation helpful?

React DOM element's `style` property name or value should not be wrong