Material-ui: How to change the style of components dynamically?

[imerkle]

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?

[oliviertassinari]

So my current approach is to use some defined classes like.

@dsslimshaddy This is the solution we are using for implementing our components. Here are a scope of the possibilities:

• Combine the class names
• Use inline-style
• Use CSS variables if you target browsers support it
• Use another styling solution
• Wait for the upgrade of JSS that support rule' properties as function (background: props => props.color) #7633

[imerkle]

I think the JSS support rule' properties as function (background: props => props.color) is already out and is implemented by https://github.com/cssinjs/react-jss#usage

It will make customizing lot easier.

[ConneXNL]

@oliviertassinari , @dsslimshaddy is right. Material UI v1 depends on react-jss 7.0.2 which is the latest version of react-jss. It should support (background: props => props.color).

However, this doesn't seem to work?

[oliviertassinari]

@ConneXNL Material-UI isn't directly using react-jss. The dynamic properties haven't been implemented by lack of time. Users can always use react-jss or any other styling solution. We will implement that feature if we need it for our own components. That can be useful.

[ConneXNL]

Users can always use react-jss or any other styling solution.

Ah I see ;)

Do you have an example of how to mix react-jss with the MuiThemes or is not that easy?

[oliviertassinari]

@ConneXNL I have never tried.

[ConneXNL]

I just wrapped createMuiTheme:

const createDynamicMuiTheme = (color) => {
    return createMuiTheme({
        overrides: {
            MuiInput: {
                inkbar: {
                    '&:after': {
                        backgroundColor: color
                    }
                },
            },
        },
    });
};

But this is probably bad for performance?

[oliviertassinari]

@ConneXNL Updating the theme rerender the whole tree. That's no something that should be done frequentely.

[ConneXNL]

<MuiThemeProvider theme={createDynamicMuiTheme(color)}>
  <TextField/>
</MuiThemeProvider>

I did wrap the textfield with the Provider or am i now injecting the entire css tree multiple times ? :)

Are the dynamic props scheduled for Version 1 though? I am having to do all of this just to use the removed funtionality of underlineFocusStyle

[oliviertassinari]

@ConneXNL Your solution shouldn't suffer from performance issue given the children tree is small.

Are the dynamic props scheduled for Version 1 though?

This won't block the release of v1. But that can always be added along the way.

[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.

[oliviertassinari]

@JM-Mendez We have move the conversation to #7633

[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} }} />