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 React from 'react';
 export class Example1 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.
+        return <div style={{ backgroundColor: 'red' }}>{this.props.greetName}</div>;
     }
 }
 export class Example2 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.
+                WebkitTransform: 'translate3d(0, 0, 0)'
             }}>
                 {this.props.greetName}
             </div>
         );
     }
 }
 export class Example3 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.
+        return <div style={{ backgroundColor: 'blue' }}>{this.props.greetName}</div>;
     }
 }

Noncompliant Code Example

View with compliant examples side by side

import React from 'react';

export class Example1 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.
    }
}

export class Example2 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>
        );
    }
}

export class Example3 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

import React from 'react';

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

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

export class Example3 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.

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