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>neveropen</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>neveropen</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.
Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, neveropen Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!
