如何更改此 MUI 循环进度的圆圈颜色

Question

如何更改此 MUI 循环进度的圆圈颜色，我从 MUI 页面本身获取此代码，https://mui.com/components/progress/（带标签的循环），有一个允许更改属性的 CodeSandBox。

(我发现一个类似的问题专门针对 android，而不是桌面 )

我尝试了几个选项都没有成功，这是我根据需要改编的代码：

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

它会产生一个蓝色圆圈：

我希望能够改变这种颜色。我猜颜色来自默认主题，但必须有一个属性来设置这样的颜色

提前致谢

拉斐尔

Answer 1

您可以使用 sx prop:

为微调器设置您想要的任何颜色

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

或使用预定义的主题颜色，例如primary、secondary等

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

Answer 2

方法一：

根据this，您可以将 'color' 属性传递给 CircularProgressWithLabel 组件。但在此之前，必须配置您的 MUI 主题并指定您的主色、副色是什么。

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

}

方法二：

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

如何更改此 MUI 循环进度的圆圈颜色

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

reactjs

material-ui

progress-bar