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

How can I change the color of the circle of this MUI circular progress, I got this code from the MUI page itself,

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

CodePudding user response：

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" 
/>

CodePudding user response：

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>;
}