react/style-prop-object

In HTML, style is a string of CSS. In React it's an object with camelCased properties, and React throws when it renders a DOM element with a string as its style.

The rule reports a style that's a string, number or boolean literal, in JSX and in React.createElement(). It also follows a variable to the literal it was declared with. It doesn't report null, undefined, a template literal, or any value it can't see, such as a prop or the result of a call.

Configure#

Off by default. To turn it on:

bunfig.toml

[lint.rules]
"react/style-prop-object" = "error" # or "warn"

Every option, set to its default:

bunfig.toml

[lint.rules]
"react/style-prop-object" = ["error", {
  allow = [], # list of strings
}]

Examples#

example.jsx3 problems

const title = <h1 style="color: red">Settings</h1>;

const css = "margin-top: 8px";
const body = <p style={css}>Saved</p>;

const footer = React.createElement("footer", { style: "padding: 4px" });

example.jsxNo problems

const title = <h1 style={{ color: "red" }}>Settings</h1>;

const css = { marginTop: 8 };
const body = <p style={css}>Saved</p>;

const footer = React.createElement("footer", { style: { padding: 4 } });

function Card({ style }) {
  return <div style={style} />;
}

Options#

Option	Default	What it does
`allow`	`[]`	Names of components that can take any `style` value.

Use allow for a component where style means something else:

example.jsxwith { "allow": ["FormattedNumber"] }No problems

const price = <FormattedNumber value={total} style="currency" />;

Other components are still checked:

example.jsxwith { "allow": ["FormattedNumber"] }1 problem

const price = <Price value={total} style="currency" />;