react/style-prop-object Suspicious

What it does

Require that the value of the prop style be an object or a variable that is an object.

Why is this bad?

The style prop expects an object mapping from style properties to values when using JSX.

Examples

Examples of incorrect code for this rule:

<div style="color: 'red'" />
<div style={true} />
<Hello style={true} />
const styles = true;
<div style={styles} />

React.createElement("div", { style: "color: 'red'" });
React.createElement("div", { style: true });
React.createElement("Hello", { style: true });
const styles = true;
React.createElement("div", { style: styles });

Examples of correct code for this rule:

<div style={{ color: "red" }} />
<Hello style={{ color: "red" }} />
const styles = { color: "red" };
<div style={styles} />

React.createElement("div", { style: { color: 'red' }});
React.createElement("Hello", { style: { color: 'red' }});
const styles = { height: '100px' };
React.createElement("div", { style: styles });

How to use

To enable this rule in the CLI or using the config file, you can use:

CLI

oxlint --deny react/style-prop-object --react-plugin

Config (.oxlintrc.json)

{
  "plugins": ["react"],
  "rules": {
    "react/style-prop-object": "error"
  }
}

References

• Rule Source