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.

Attention reader! Don’t stop learning now. Get hold of all the important DSA concepts with the DSA Self Paced Course at a student-friendly price and become industry ready.

My Personal Notes

Related Articles

Javascript

Javascript