Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

How to merge multiple inline style objects ?

  • Last Updated : 22 Jan, 2021

Multiple inline styles can be merged in two ways both the ways are described below:

Method 1- Using Spread operator: The … operator is called a spread operator. The spread operator in this case concatenates both the objects into a new object. Below is the implementation of merging multiple inline styles using the spread operator.

Javascript




import React from 'react';
  
const text= {
    color: 'green',
    fontSize: '50px'
,
    textAlign: 'center'
}
const background = {
    background: "#e0e0e0"
}
  
export default function App(){
    return (
      <div style={{...text,...background}}>
         <h1>GeeksforGeeks</h1>
      </div>
    )
}

Method 2- Using Object.assign(): Below is the implementation of merging multiple inline styles using Object.assign() method. In this case, the text and background objects are both assigned to a new empty object. 

Javascript




import React from "react";
  
const text= {
    color: 'green',
    fontSize: '50px'
,
    textAlign: 'center'
}
;
const background = {
    background: "#e0e0e0"
};
  
export default function App() {
  return (
    <div style={Object.assign({}, text, background)}>
      <h1>GeeksforGeeks</h1>
    </div>
  );
}

Output: In both the method if two or more objects have the same property then the property of the object present in rightmost will be reflected in the output.


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!