Passing value dynamically in style object reactjs

Question

I want to pass background color dynamically and want to set in the component like this

<Paper style={circleStyle} zDepth={1} circle={true}> V </Paper>

const circleStyle = {
  ....
  background: '#00AA90',
  .....
};

Here in this example i want to pass background color dynamically how to do this ,I have other styles as well in circleStyle ?

PS: If i use ClassName in that case is also not working dynamic values, any idea ?

you mean you want to pass color along with circleStyle correct? — Mayank Shukla, Sep 11 '17 at 11:02
Have you tried using `var` instead of `const`? Is it a hoisting issue? — StudioTime, Sep 11 '17 at 11:02
@DarrenSweeney variable is accessing fine, but the thing is i want to pass as parameter and set in object, — Pardeep Jain, Sep 11 '17 at 11:03

Mayank Shukla · Accepted Answer · 2017-09-11T11:13:52.013

1

Write it like this:

style={{...circleStyle, backgroundColor: 'red'}}

Or

style={ Object.assign({}, circleStyle, {backgroundColor: 'red'}) }

Now style will get a new object that will contain circleStyle values as well as backgroundColor.

Check this snippet:

let obj = {a: 1, b: 2};

let newObj = {...obj};      //equivalent to Object.assign({}, obj)

console.log('newObj = ', newObj);

Check this answer for more details about Spread Operator (...):

edited Sep 11 '17 at 11:13

answered Sep 11 '17 at 11:03

Mayank Shukla

can you please tell what if i want to add style on the basis of media query ? like we did using sepred operator will apply for all devices but if i want to apply some style using media query ? – Pardeep Jain Sep 20 '17 at 07:19
not sure about media query, highly uncomfortable with css :) – Mayank Shukla Sep 20 '17 at 07:42

1 Answers1