Extending style object in react.js

Question

I'm using react.js and manage most of the style attributes via react, too. If I have a, for example, a success and an error button I want to apply a different background color to them.

Right now, I'm doing this with jQuery's extend function:

<span style={$.extend({background: 'forestgreen'},this.state.buttonStyle)}></span>

But I'm wondering if there is a better and maybe more readable solution for this. Any advice?

Answer 1

If you use a transpiler that implements the spread property proposal (such as Babel), you can write

style={{...this.state.buttonStyle, background: 'forestgreen'}}

instead.

Whether thats "better" or more readable is likely subjective.