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:

  1. Hyphenated property name
  2. Non-capitalized vendor prefixes such as webkit, moz, and o
  3. Property value having semicolon at the end
  4. 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

View with compliant examples side by side
// Example 1
import React from 'react';

class Hello extends React.Component {
    render() {
        return <div style={{ 'background-color': 'red' }}>{this.props.greetName}</div>; // REACT_BAD_STYLE_OBJ_PROPERTY alarm because 'background-color' style property has hyphen, not camelcased.
    }
}

// Example 2
import React from 'react';

class Hello extends React.Component {
    render() {
        return (
            <div style={{
                msTransform: 'translate3d(0, 0, 0)',
                webkitTransform: 'translate3d(0, 0, 0)' // REACT_BAD_STYLE_OBJ_PROPERTY alarm because 'webkit' vendored-prefix is not capitalized.
            }}>
                {this.props.greetName}
            </div>;
        );
    }
}

// Example 3
import React from 'react';

class Hello extends React.Component {
    render() {
        return <div style={{ backgroundColor: 'blue;' }}>{this.props.greetName}</div>; // REACT_BAD_STYLE_OBJ_PROPERTY alarm because the value 'blue;' has semicolon at the end.
    }
}

Compliant Code Example

View with noncompliant examples side by side
// Example 1
import React from 'react';

class Hello extends React.Component {
    render() {
        return <div style={{ backgroundColor: 'red' }}>{this.props.greetName}</div>;
    }
}

// Example 2
import React from 'react';

class Hello extends React.Component {
    render() {
        return (
            <div style={{
                msTransform: 'translate3d(0, 0, 0)',
                WebkitTransform: 'translate3d(0, 0, 0)'
            }}>
                {this.props.greetName}
            </div>;
        );
    }
}

// Example 3
import React from 'react';

class Hello extends React.Component {
    render() {
        return <div style={{ backgroundColor: 'blue' }}>{this.props.greetName}</div>;
    }
}

Version

This rule was introduced in DeepScan 1.6.0-beta.

See

  • Style Attribute

  • 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.