Combine multiple inline Style objects in React

avatar

Borislav Hadzhiev

Wed Apr 20 20223 min read

Combine multiple inline Style objects in React #

Use the spread syntax to combine multiple inline style objects in React, e.g. style={{...style1, ...style2}}. The spread syntax will unpack the key-value pairs of the objects into a final object and the styles will get applied to the element.

App.js
export default function App() { const style1 = {backgroundColor: 'salmon'}; const style2 = {fontSize: '2rem'}; return ( <div> <div style={{...style1, ...style2}}>Some content here</div> </div> ); }

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
export default function App() { const style1 = {backgroundColor: 'salmon'}; const style2 = {fontSize: '2rem'}; const style3 = {color: 'white'}; return ( <div> <div style={{...style1, ...style2, ...style3}}>Some content here</div> </div> ); }

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

App.js
export default function App() { const style1 = {backgroundColor: 'salmon'}; const style2 = {fontSize: '2rem'}; return ( <div> <div style={{...style1, ...style2, color: 'white', padding: '2rem'}}> Some content here </div> </div> ); }

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 get evaluated.

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

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

App.js
export default function App() { const style1 = {backgroundColor: 'salmon'}; const style2 = {fontSize: '2rem'}; const style3 = {backgroundColor: 'blue'}; // 👈️ overrides style1 return ( <div> <div style={{...style1, ...style2, ...style3}}>Some content here</div> </div> ); }

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.

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

App.js
export default function App() { const style1 = {backgroundColor: 'salmon'}; const style2 = {fontSize: '2rem'}; return ( <div> <div style={Object.assign({}, style1, style2, {color: 'white'})}> Some content here </div> </div> ); }
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
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> ); }

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.

Use the search field on my Home Page to filter through my more than 1,000 articles.