Style property of a React DOM element should be an object |
To define inline styles in React, you need to specify them as an object rather than a string
| CheckId | RCT010102 |
|---|---|
| TypeName | CssStylePropertyRule |
| Severity | Error |
| Type | React component |
To define inline styles in React, you need to specify them as an object rather than a string.
Bad practice (uses a string value)
export class Message extends React.Component {
render() {
return (
<div style="color: '#f00'">Hello</div>
);
}
}
render() {
return (
<div style="color: '#f00'">Hello</div>
);
}
}
Bad practice (styles point to the method and not its value)
export class Message extends React.Component {
getStyles() {
return { color: '#f00' };
}
render() {
return (
<div style={this.getStyles}">Hello</div>
);
}
}
getStyles() {
return { color: '#f00' };
}
render() {
return (
<div style={this.getStyles}">Hello</div>
);
}
}
Good practice (inline styles)
export class Message extends React.Component {
render() {
return (
<div style={{ color: '#f00' }}>Hello</div>
);
}
}
render() {
return (
<div style={{ color: '#f00' }}>Hello</div>
);
}
}
Good practice (styles returned by a method)
export class Message extends React.Component {
getStyles() {
return { color: '#f00' };
}
render() {
return (
<div style={this.getStyles()}">Hello</div>
);
}
}
getStyles() {
return { color: '#f00' };
}
render() {
return (
<div style={this.getStyles()}">Hello</div>
);
}
}
Disclaimer: The views and opinions expressed in this documentation and in SPCAF do not necessarily reflect the opinions and recommendations of Microsoft or any member of Microsoft. SPCAF and RENCORE are registered trademarks of Rencore. All other trademarks, service marks, collective marks, copyrights, registered names, and marks used or cited by this documentation are the property of their respective owners.