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.
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().
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.