How to combine multiple inline style objects?

Question

In React you can clearly create an object and assign it as an inline style. i.e.. mentioned below.

var divStyle = {
          


        

Answer 1

You can do this with Object.assign().

In your example, you would do:

ReactDOM.render(
    

        Hello World!
    
,
    mountNode
);

That will merge the two styles. The second style will replace the first if there are matching properties.

As Brandon noted, you should use Object.assign({}, divStyle, divStyle2) if you want to reuse divStyle without the fontSize applied to it.

I like to use this to make components with default properties. For example, here's a little stateless component with a default margin-right:

const DivWithDefaults = ({ style, children, ...otherProps }) =>
    

        {children}
    
;

So we can render something like this:

    Some text.


    Some more text.


    Even more text.

Which will give us the result:

Some text.
Some more text.
Even more text.