Disable Material UI's <LinearProgress /> animation

Question

I am using Material-UI's <LinearProgress variant="determinate" /> component which by default transforms the scaleX() property of a <div> inside another <div> whenever the value changes to visualize the current progress. It does so with an easing effect to make everything look smooth which generally is quite nice, however for the purpose of my application (audio seekbar) I would like to disable this animation entirely whenever the value changes.

Is it possible?

• Demo: codesandbox

Answer 1

I was able to resolve this using overrides

bar: {
  transition: 'none'
}
...

...
<LinearProgress variant="determinate" classes={{ bar: classes.bar}} />