Style prop value must be an object in React [Solved]

# Style prop value must be an object in React

The warning "Style prop value must be an object" occurs when we pass a string to the style prop of an element in React.

To fix the warning, use a mapping from properties to values, e.g. style={{paddingLeft: '15px'}}.

style prop value must be object

Here is an example of how the warning is caused.

App.js

Copied!
const App = () => {
  // ⛔️ Uncaught Error: The `style` prop expects a mapping from style properties to values, not a string.
  // ⛔️ Style prop value must be an object eslint(react/style-prop-object)
  return (
    <div>
      <h1 style="margin-left: 4rem">Hello world</h1>
    </div>
  );
};

export default App;

The code for this article is available on GitHub

The issue is that we're passing a string to the style prop of the h1 element.

You might also get the error: "The style prop expects a mapping from style properties to values" and the solution is the same.

the style prop expects a mapping from style properties

shell

Copied!
Uncaught Error: The `style` prop expects a mapping from style properties to values, not a string.
For example, style={{marginRight: spacing + 'em'}} when using JSX.

# The `style` prop has to be a mapping of properties to values

Instead, the style prop should be a mapping from properties to values.

App.js

Copied!
const App = () => {
  return (
    <div>
      <h1
        style={{
          marginLeft: '4rem',
          fontSize: '20px',
          padding: '20px',
          backgroundColor: 'salmon',
          color: 'white',
        }}
      >
        Hello world
      </h1>
    </div>
  );
};

export default App;

style prop has to be mapping of properties to values

The code for this article is available on GitHub

Notice that we used 2 sets of curly braces. The outer set of curly braces evaluates an expression, and the inner set is the object containing property names and values.

You can also use logic to calculate a specific value.

App.js

Copied!
const App = () => {
  return (
    <div>
      <h1
        style={{
          marginLeft: 2 + 2 + 'rem',
          fontSize: Math.random() > 0.5 ? '20px' : '40px',
          padding: '20px',
          backgroundColor: 'salmon',
          color: 'white',
        }}
      >
        Hello world
      </h1>
    </div>
  );
};

export default App;

I've also written a guide on how to combine multiple inline style objects.

# Extracting the object into a variable

You can also extract the object of properties and values into a variable.

App.js

Copied!
const App = () => {
  const h1Styles = {
    marginLeft: 2 + 2 + 'rem',
    fontSize: Math.random() > 0.5 ? '20px' : '40px',
    padding: '20px',
    backgroundColor: 'salmon',
    color: 'white',
  };

  return (
    <div>
      <h1 style={h1Styles}>Hello world</h1>
    </div>
  );
};

export default App;

extracting the object into variable

The code for this article is available on GitHub

Notice that names of CSS properties must be camelCased. An alternative is to write your CSS in a file with a .css extension and use the className prop to style your elements.

I've also written a detailed guide on how to correctly set inline styles.

# Using external CSS files

Here is how we would move the styles for the h1 element into a class in a file called App.css.

App.css

Copied!
.my-h1 {
  margin-left: 4rem;
  font-size: 20px;
  padding: 20px;
  background-color: salmon;
  color: white;
}

Now we can import the CSS file and use the my-h1 class.

App.js

Copied!
import './App.css';

const App = () => {
  return (
    <div>
      <h1 className="my-h1">Hello world</h1>
    </div>
  );
};

export default App;

using external css files

The code for this article is available on GitHub

This is an alternative to inlining styles.

Notice that the prop is called className and not class.

The reason is that class is a reserved word in JavaScript. The class keyword is used to declare ES6 classes.

If you need to set a global font family in React, click on the following link.

# Additional Resources

You can learn more about the related topics by checking out the following tutorials:

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.

You can use the search field on my Home Page to filter through all of my articles.

Style prop value must be an object in React [Solved]