React - pass multiple style objects to component

In this article, we would like to show you how to pass multiple style objects to the component in React.

Quick solution:

<div style={{ ...style1, ...style2 }}></div>

Practical example

In this example, we present how to add multiple style objects to the div element inside App component using spread operator (...).

// ONLINE-RUNNER:browser;

// Note: uncomment import lines in yours project.
// import React from "react";
// import ReactDOM from "react-dom";

const style1 = {
    width: '50px',
    height: '50px'
};

const style2 = {
    border: '3px dashed red',
    background: 'yellow'
};

const App = () => {
    return <div style={{ ...style1, ...style2 }}></div>;
};

const root = document.querySelector('#root');
ReactDOM.render(<App />, root);

References

1. Spread syntax (...) - JavaScript | MDN