How to merge multiple inline style objects ?

In this article, we will learn about the Multiple inline styles. Multiple inline styles can be merged in two ways both 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.

Example: Below is the basic example of 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>
    )
}

Output:

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. 

Example: Below is the basic example of the Object.assign().

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.