React MUI: Create stacked progress bar by disabling buffer animation

Question

I want a stacked progress bar tracking two fields:

1. valueBuffer: amount unlocked out of total. The light blue bar.
2. value: amount claimed out of unlocked. The dark blue bar.

Variant buffered suits my use case but the dotted line animation is annoying. How do I disable the animation and replace it with a regular bar?

<LinearProgress variant="buffer" value={50} valueBuffer={70} />

If this is not possible, what is the alternative to have a bootstrap style stacked progress bar?

Answer 1

You can use add a custom style to .MuiLinearProgress-dashed and modify the default dashed styles using sx attribute like this:

<LinearProgress
    variant="buffer"
    value={progress}
    valueBuffer={buffer}
    sx={{
      "& .MuiLinearProgress-dashed": {
        backgroundColor: "lightgrey",
        backgroundImage: "none",
        animation: "none"
      }
    }}
/>

You can take a look at this sandbox for a live working example of this solution.