How can I change the colour of a MUI LinearProgress component?

Question

I have the following code and I would like to change the colour of the progress bar. I'm unable to figure out what I'm doing wrong.

import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import LinearProgress from "@material-ui/core/LinearProgress";

const useStyles = makeStyles({
  root: {
    width: "100%",
    barColorSecondary: "white",
  },
});

export default function LinearDeterminate() {
  const classes = useStyles();
  const [progress, setProgress] = React.useState(0);

  React.useEffect(() => {
    const timer = setInterval(() => {
      setProgress((oldProgress) => {
        if (oldProgress === 100) {
          return 0;
        }
        const diff = Math.random() * 10;
        return Math.min(oldProgress + diff, 100);
      });
    }, 500);

    return () => {
      clearInterval(timer);
    };
  }, []);

  return (
    <div className={classes.root}>
      <LinearProgress
        variant="determinate"
        value={progress}
        valueBuffer="100"
        color="secondary"
      />
    </div>
  );
}
 ``

Welcome to Stack Overflow. Please see [how to ask](https://stackoverflow.com/help/how-to-ask) a question here. 1. Please calm down and don't use screaming tone, just ask the question and people will try to help you; 2. If you want to attract relevant people to your post, make sure you always tag your question accordingly (in this case, probably #reactjs should do); 3. It's always very much recommended to provide some research - what you have tried? what didn't work? what exactly you're having trouble with? just *do this for me* is usually no the best way to come on this site. — Giorgi Tsiklauri, Sep 13 '20 at 23:41
Hi there. Please review https://stackoverflow.com/help/how-to-ask for some tips in asking a question. I agree with @Giorgi Tsiklauri above and It will also help if you let us know what part of the code you are talking about. — Andre DiCioccio, Sep 14 '20 at 04:14

score 2 · Answer 1 · answered Feb 27 '22 at 08:52

best trick for using any color for <LinearProgress /> component:
wrap <LinearProgress /> component in a <Box /> component and give the desired color to the <Box sx={color: 'desiredColor'} /> component and set inherit value for color props of <LinearProgress color='inherit' />

for example:

<Box sx={{ width: '100%', color: '#75f'}}>
   <LinearProgress color='inherit' variant='determinate' value={60} />
</Box>

Cedervall · Answer 2 · 2020-09-14T10:57:08.677

What is wrong is that you doesn't target the progressbar. You target the div surrounding the bar.

You could just add a style tag in the progressbar.

<LinearProgress  
    variant="determinate"
    value={progress}
    valueBuffer="100" 
    style={{color: "red"}} 
/>

or preferably if you add a class to the the progress bar.

<LinearProgress  
    variant="determinate"
    value={progress}
    valueBuffer="100" 
    className={classes.root} //or whatever you call the styling. 
/>

How can I change the colour of a MUI LinearProgress component?

2 Answers2

Linked