How can I change the color of the circle of this MUI circular progress

user_1353914 0
Viewed 1712

How can I change the color of the circle of this MUI circular progress, I got this code from the MUI page itself, https://mui.com/components/progress/ (Circular with label), there's a CodeSandBox that allows changing properties.

(I found a similar question dedicated to android, not desktop)

I tried several options with no success, this is the code that I adapted to my needs:

function CircularProgressWithLabel(props) {
    return (
        <Box sx={{ position: 'relative', display: 'flex' }}>
            <CircularProgress variant="determinate" size="10rem" {...props} />
            <Box
                sx={{
                    top: 0,
                    left: 0,
                    bottom: 0,
                    right: 0,

                    position: 'absolute',
                    display: 'flex',
                    alignItems: 'center',
                    justifyContent: 'center'
                }}
            >
                <Typography variant="caption" color="hsl(0, 0%, 100%)" component="div" sx={{ fontSize: '2rem' }}>
                    {`${Math.round(props.value)}%`}
                </Typography>
            </Box>
        </Box>
    );
}

function CircularStatic(props) {
    return <CircularProgressWithLabel value={props.progress} />;
}

it results in a blue circle: enter image description here

I want to be able to change this color. I guess the color comes from the default theme, but there must be a property to set such color

Thanks in advance

Rafael

material-ui reactjs progress-bar
2 Answers

You can set whatever color you want to the spinner using sx prop:

<CircularProgress 
  variant="determinate" 
  size="10rem"
  {...props}
  sx={{color:"red"}} 
/>

or use predefined theme colors such as primary, secondary etc

<CircularProgress 
  variant="determinate" 
  size="10rem"
  {...props}
  color="secondary" 
/>
user_141906900

Method 1:

According to this, you can pass 'color' prop to CircularProgressWithLabel component. But before this, must configure your MUI theme and specify what is your primary, secondary colors are.

function CircularStatic(props) {
    return <CircularProgressWithLabel color='primary' value={props.progress} />;

}

Method 2:

function CircularStatic(props) {
    return <div style={{ color: "blue" }}>
              <CircularProgressWithLabel color="inherit" value={props.progress} />
           </div>;
}
user_147608110
Related