Skip to main content

react/useStylePropObject

This rule enforces the value of style to be a object. React will ignore non-object style props, even valid JSON strings.

ESLint Equivalent: style-prop-object

Examples

Invalid

<div style={true} />

 file.tsx:1:5 lint/react/useStylePropObject ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  The style prop value must be an object.

    <div style={true} />
         ^^^^^^^^^^^^

  React will ignore non-object style props, even valid JSON strings.


<div style={1} />

 file.tsx:1:5 lint/react/useStylePropObject ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  The style prop value must be an object.

    <div style={1} />
         ^^^^^^^^^

  React will ignore non-object style props, even valid JSON strings.


<div style={undefined} />

 file.tsx:1:5 lint/react/useStylePropObject ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  The style prop value must be an object.

    <div style={undefined} />
         ^^^^^^^^^^^^^^^^^

  React will ignore non-object style props, even valid JSON strings.


<div style="color: 'red'" />

 file.tsx:1:5 lint/react/useStylePropObject ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  The style prop value must be an object.

    <div style="color: 'red'" />
         ^^^^^^^^^^^^^^^^^^^^

  React will ignore non-object style props, even valid JSON strings.


<div style={"color: 'red'"} />

 file.tsx:1:5 lint/react/useStylePropObject ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  The style prop value must be an object.

    <div style={"color: 'red'"} />
         ^^^^^^^^^^^^^^^^^^^^^^

  React will ignore non-object style props, even valid JSON strings.

Valid

<div style={{color: 'red'}} />