Dynamically changing JSS values when using withStyles() in material-ui

Question

I have a Drawer component that is wrapped using withStyles and overrides some values on the anchorLeft className. <Drawer anchor="left" classes={{paper: this.props.classes.paper, anchorLeft: this.props.classes.anchorLeft}} ...>

I have some other parts of the app that can effect the top value that needs to be passed to anchorLeft. I am using redux so the top value is being passed through the redux store and sent to my Drawer component through props, so I need a way in the component to effect the anchorLeft top value.

What's the preferred way to do dynamic styling inside the component and change the values in the JSS style sheet? Is there a way to use the JSS sheet.update() and get access to the sheet that way? http://cssinjs.org/json-api?v=v9.0.0-pre.3#function-values

Answer 1

I assume you are using react-jss or styled-jss, in both cases you can use function values and you receive props there already.

Answer 2

Appears as of right now, it's not possible to do with the material-ui withStyles. I had to add react-jss and use injectStyles in the components I needed the dynamic functions, and then add an additional ThemeProvider that took the same theme as MuiThemeProvider so both material-ui and react-jss themes had the same setup.

Issue that's currently being tracked for material-ui related to this functionality: https://github.com/callemall/material-ui/issues/7633