# react/style-prop-object

> Require the value of the `style` prop to be an 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.

{/* Generated by src/codegen/lint-rule-docs.ts. Do not edit this section. */}

## Configure

Off by default. To turn it on:

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

Every option, set to its default:

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

{/* End of the generated section. */}

## Examples

Reported:

{/* bad {"count": 3} */}
```jsx
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" });
```

Not reported:

{/* good */}
```jsx
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:

{/* good {"options": [{"allow": ["FormattedNumber"]}]} */}
```jsx
const price = <FormattedNumber value={total} style="currency" />;
```

Other components are still checked:

{/* bad {"options": [{"allow": ["FormattedNumber"]}]} */}
```jsx
const price = <Price value={total} style="currency" />;
```