如何自定义mui圆形进度条？

Question

我想像上图一样定制它。
我想为边缘提供白色，为其他所有内容提供蓝色。

这是我的源代码。

 <CircularProgress
        variant="determinate"
        color={!action ? "primary" : "progress_second"}
        {...props}
        size="215px"
        thickness={3}
        variant="determinate"
        value={Math.round((props.value?.done / props.value?.total) * 100 || 0)}
        style={{
          transform: "rotate(440deg)",
        }}
      />

这是我的循环进度。

请帮助我！

Answer 1

检查一下它可能对您的情况有所帮助。您可以使用 sx 属性为微调器设置任何您想要的颜色：

https://smartcodehelper.com/2022/01/25/material-ui-circular-progress-customization-example/

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

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

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

Answer 2

您需要添加另一个 CircularProgress 并将其值设置为 100，具体做法如下：

      <CircularProgress
        variant="determinate"
        value={100}
        size={100}
        thickness={4}
        sx={{
          color: '#e0e0e0', // Light gray color for uncompleted (remaining) portion
          position: 'absolute',
        }}
      />

      {/* CircularProgress for completed time */}
      <CircularProgress
        variant="determinate"
        value={progress}
        size={100}
        thickness={4}
        color="primary" // Primary color for completed portion
      />

在此代码下方，您可以添加您的人数百分比