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 React from 'react';

class Hello extends React.Component {
    getTextStyle() {
        return { color: 'blue' };
    }

    render() {
        return (
            <div>
                <div style="color: 'red'">Text in red</div> {/* REACT_BAD_STYLE_PROP alarm because it is a string value. */}
                <div style={this.getTextStyle}>Text in blue</div> {/* REACT_BAD_STYLE_PROP alarm because it is a function value. */}
            </div>
        );
    }
}

Compliant Code Example

import React from 'react';

class Hello extends React.Component {
    getTextStyle() {
        return { color: 'blue' };
    }

    render() {
        return (
            <div>
                <div style={{ color: 'red' }}>Text in red</div>
                <div style={this.getTextStyle()}>Text in blue</div>
            </div>
        );
    }
}

Version

This rule was introduced in DeepScan 1.3.0-beta.

See

  • style attribute

  • React Error: The style prop expects a mapping from style properties to values, not a string.