How to use Object.assign() In ReactJS
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>w3wiki</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.
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:
Table of Content
- Using Spread operator:
- Using Object.assign():