How to dynamically change CSS properties in "css in js" styling

Hi guys,

I’m working on a react app and creating a timer with progress bar. The progress bar will show the progress of the timer.

Now fI’m using the “css in js” withStyles styling solution from the material ui library. I am not able to figure out a way to change the width and for that matter any css property using this approach. Any idea how do I achieve that?

I tried searching for it over internet but couldn’t find a comprehensible answer.

Thank you! :heart:

Hi there,

When using material-ui I’ve never really used withStyles but I think you can easily achieve what you want with makeStyles.

Here’s little demo:

Also, in the newest version it’s going to be actually even easier (but it’s still in beta I think).

1 Like

Thanks. This would work. :slight_smile: