React MaterialUI LinearProgress with gradient

Question

I would like to customize the look of MaterialUI's LinearProgress component so that the bar denoting completeness is a gradient, so that regardless of length, the left side is color A and the right side is color B, and the gradation is quick or slow depending on the length of the bar. Note that the ends of the progress are the same aqua and lavender...

Basically I want

background-image: linear-gradient(to right, #6fcbb6, #9c64f4);
width: 20%;

However, Material seems to set the progress of bar like this:

transform: translateX(-80%);

Meaning that if I style the progress bar with a gradient, it looks like this:

(With dev tools highlighting the element: )

Is there a way to customize the LinearProgress component to have it display progress in the way that I indicated above? I'd like to keep using Material components but I'm wondering if it would just be easier to make my own progress bar component in this case.

Answer 1

would something like this work for you?

const {LinearProgress, makeStyles} = MaterialUI

const useStyles = makeStyles({
  root: {
    height: 10,
    borderRadius: 5
  },
  bar: ({ progress }) => ({
    borderRadius: 5,
    background: `linear-gradient(90deg, #6fcbb6 ${100 - progress}%, #9c64f4 100%)`
  })
});

const Progress = ({ progress = 20 }) =>  {
  const classes = useStyles({ progress });

  return (
      <LinearProgress
        classes={{ root: classes.root, bar: classes.bar }}
        variant="determinate"
        value={progress}
      />
  );
}

ReactDOM.render(<Progress />, document.getElementById('root'))

<script src="https://unpkg.com/react@latest/umd/react.development.js" crossorigin="anonymous"></script>
<script src="https://unpkg.com/react-dom@latest/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@material-ui/core@latest/umd/material-ui.development.js" crossorigin="anonymous"></script>
<script src="https://unpkg.com/babel-standalone@latest/babel.min.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
<div id="root"></div>

Answer 2

Slightly easier way to color the progress bar:

<LinearProgress
  variant="determinate"
  value={progressVal}
  sx={{
    background: 'linear-gradient(to right, #6fcbb6, #9c64f4)'
    '> span': { backgroundColor: 'red' },
  }}
/>