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?

Felix Kling · Accepted Answer · 2015-07-22 16:18:34Z

7

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.

answered Jul 22, 2015 at 16:18

Felix Kling

820k181 gold badges1.1k silver badges1.2k bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

baao Over a year ago

I use Babel, so I will give this a try. No need for jQuery anymore then.

Felix Kling Over a year ago

Alternatively, you could use Object.assign if you polyfill it: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…

baao Over a year ago

Object.assign sounds good, but it seems to be unsupported by any browser but firefox - do I get this wrong?

Felix Kling Over a year ago

That's why I said you'd have to polyfill it. Babel does this as well with the right config.

baao Over a year ago

OK, now I see. Thank you!

|

Collectives™ on Stack Overflow

Extending style object in react.js

1 Answer 1

9 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related