Don't use invalid CSS style names and values

When working with CSS styles in React, you need to ensure that the names and values of properties are valid in React

CheckId	RCT010110
TypeName	ReactDOMElementsStylePropertyRule
Severity	Error
Type	React component

Resolution

When working with CSS styles in React, you need to ensure that the names and values of properties are valid in React. In following cases, React will show a warning:

hyphenated property name, eg. background-color instead of backgroundColor
non-capitalized vendor prefix, eg. webkitTransition instead of WebkitTransition
property value ending with a ; (semicolon), eg. color: red;

Bad practice (hyphenated property name)

export class Message extends React.Component {
    render() {
        return <div style={{ 'background-color': 'blue' }}>{this.prop.message}</div>;
    }
}

Good practice (hyphenated properties written using camel case)

export class Message extends React.Component {
    render() {
        return <div style={{ backgroundColor: 'blue' }}>{this.prop.message}</div>;
    }
}

Bad practice (non-capitalized vendor prefix)

export class Message extends React.Component {
    render() {
        return <div style={{ webkitTransform: 'translate3d(0, 0, 0)' }}>{this.prop.message}</div>;
    }
}

Good practice (vendor prefix capitalized)

export class Message extends React.Component {
    render() {
        return <div style={{ WebkitTransform: 'translate3d(0, 0, 0)' }}>{this.prop.message}</div>;
    }
}

Bad practice (property value ends with semicolon)

export class Message extends React.Component {
    render() {
        return <div style={{ backgroundColor: 'blue;' }}>{this.prop.message}</div>;
    }
}

Good practice (property value doesn't end with semicolon)

export class Message extends React.Component {
    render() {
        return <div style={{ backgroundColor: 'blue' }}>{this.prop.message}</div>;
    }
}