How to combine Multiple inline Style objects in React

# Combine multiple inline Style objects in React

Use the spread syntax to combine multiple inline style objects in React.

The spread syntax will unpack the key-value pairs of the objects into a final object and the styles will be applied to the element.

App.js

Copied!
export default function App() {
  const style1 = {backgroundColor: 'salmon'};
  const style2 = {fontSize: '2rem'};

  return (
    <div>
      <div style={{...style1, ...style2}}>bobbyhadz.com</div>
    </div>
  );
}

react combine multiple inline style objects

The code for this article is available on GitHub

We used the spread syntax (...) to combine multiple inline style objects in React.

You can merge as many inline-style objects as necessary.

App.js

Copied!
export default function App() {
  const style1 = {backgroundColor: 'salmon'};
  const style2 = {fontSize: '2rem'};
  const style3 = {color: 'white'};

  return (
    <div>
      <div style={{...style1, ...style2, ...style3}}>bobbyhadz.com</div>
    </div>
  );
}

merging many inline style objects

The code for this article is available on GitHub

If you get the warning prop spreading is forbidden, click on the link and follow the instructions.

# Adding key-value pairs after merging the style objects

You can also add key-value pairs inline after you have combined the style objects.

App.js

Copied!
export default function App() {
  const style1 = {backgroundColor: 'salmon'};
  const style2 = {fontSize: '2rem'};

  return (
    <div>
      <div style={{...style1, ...style2, color: 'white', padding: '2rem'}}>
        bobbyhadz.com
      </div>
    </div>
  );
}

adding key value pairs after merging the style objects

An easy way to think of the spread syntax (...) is that we are unpacking the key value pairs of the objects into a new object.

Notice that we used 2 sets of curly braces for the style prop. The outer set of curly braces marks the beginning of an expression that will be evaluated.

The inner set of curly braces is the object containing styles and values.

# The order in which the styles are merged is important

It's very important to note that the order in which you use the spread syntax to combine the style objects matters.

App.js

Copied!
export default function App() {
  const style1 = {backgroundColor: 'salmon'};
  const style2 = {fontSize: '2rem'};
  const style3 = {backgroundColor: 'lime'}; // 👈️ overrides style1

  return (
    <div>
      <div style={{...style1, ...style2, ...style3}}>bobbyhadz.com</div>
    </div>
  );
}

last style property has precedence

The code for this article is available on GitHub

Notice that the objects style1 and style3 set the backgroundColor property to different values.

If two objects have the same key, the object whose properties are unpacked later wins.

Both of the objects have the backgroundColor property, however the keys of style3 are unpacked later, so its value overrides the value of the backgroundColor property in style1.

# Combine multiple inline Style objects using Object.assign()

You might also see examples online that use the Object.assign() method to combine inline style objects.

App.js

Copied!
export default function App() {
  const style1 = {backgroundColor: 'salmon'};
  const style2 = {fontSize: '2rem'};

  return (
    <div>
      <div style={Object.assign({}, style1, style2, {color: 'white'})}>
        bobbyhadz.com
      </div>
    </div>
  );
}

combine multiple inline style objects using object assign

The code for this article is available on GitHub

The first parameter the Object.assign() method takes is the target object - the object to which the properties of the source objects are applied.

The next parameters the method takes are one or more source objects.

The properties of the target object are overwritten by other objects that have the same properties later in the parameter order.

App.js

Copied!
export default function App() {
  const style1 = {backgroundColor: 'salmon'};
  const style2 = {fontSize: '2rem'};

  return (
    <div>
      <div style={Object.assign({}, style1, style2, {backgroundColor: 'lime'})}>
        Some content here
      </div>
    </div>
  );
}

The code for this article is available on GitHub

This behavior is consistent with the spread syntax (...).

Either of the two approaches works, but I'd stick to using the spread syntax (...) because I find it easier to read and it's much more commonly used in React.js applications.

# 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.

How to combine Multiple inline Style objects in React

# Combine multiple inline Style objects in React

# Adding key-value pairs after merging the style objects

# The order in which the styles are merged is important

# Combine multiple inline Style objects using Object.assign()

# Additional Resources

Borislav Hadzhiev