How to change the style of components dynamically?

https://www.webpackbin.com/bins/-Kon08wq7y0PT-JC4ufF

This is my current code. Since the stylesheet is static there is no way I can pass props to objects inside it. So my current approach is to use some defined classes like.

const styles = {
  bar: {
    background: '#f00',
  },
  greenBar: {
    background: 'green',
  },
};

and do this

<LinearProgress classes={{ bar: props.classes[props.color] }} />

call using

<Progress color="greenBar" />

It’s not perfect, it’s not even good I think but I would like to know what are the possibilities?

[JM-Mendez]

@ConneXNL I know it’s a closed issue, but for anyone stumbling across this, to use react-jss with material-ui, all you have to do is replace material-ui’s withStyles() method with react-jss injectSheet() , and the Themeprovider component in place of MuiThemeProvider.

[lucas-viewup]

@oliviertassinari, the point of @dsslimshaddy is a good way to solve that problem but another approach is implement a property that modifies the property of a inner component, in this case, you could implement an property called barProps and using this you could use the property style to modify the style of the inner element:

<LinearProgress barProps={{style: {backgroundColor: anyVariable} }} />