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
  5. Missing unit for the property value of numeric string

In the above cases, the style property could not be applied.

Noncompliant Code Example

// 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.
    }
}

// Example 4
import React from 'react';

class Hello extends React.Component {
    render() {
        return <div style={{ borderWidth: '1' }}>{this.props.greetName}</div>; // REACT_BAD_STYLE_OBJ_PROPERTY alarm because the value of style property 'borderWidth' has no unit.
    }
}

Compliant Code Example

// 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>;
    }
}

// Example 4
import React from 'react';

class Hello extends React.Component {
    render() {
        return <div style={{ borderWidth: '1px' }}>{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.

  • React Warning: a div tag (owner: Hello) was passed a numeric string value for CSS property fontSize (value: 1) which will be treated as a unitless number in a future version of React.