如何在Material-UI Circular Progress中添加额外的描边

Question

我正在尝试使用 Material-UI 创建一个确定的循环进度，如下所示：循环进度图像

下面的代码似乎没有显示额外的圆圈作为背景：

<CircularProgress variant="determinate" value={value} />

我检查了有关循环进度的 MUI 文档，但找不到任何支持此行为的道具。据我所知，MUI 使用单个 svg 组件来实现循环进度，根据我的理解，它只能使用 2 个 svg 来实现，其中一个作为骨架，另一个作为加载进度。

我的问题是如何向圆形进度添加额外的描边颜色/实现与上图链接所示相同的效果？任何帮助是极大的赞赏。谢谢！

Answer 1

查看文档的自定义部分。

简而言之，是的，您需要第二个带有 的圆圈value=100。

这是 JS 代码示例，应该可以完成您想要的操作：

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

const useStyles = makeStyles((theme) => ({
  root: {
    position: "relative"
  },
  bottom: {
    color: "blue"
  },
  top: {
    color: "red",
    animationDuration: "550ms",
    position: "absolute",
    left: 0
  },
  circle: {
    strokeLinecap: "round"
  }
}));

export default function MyCircularProgress(props) {
  const classes = useStyles();

  return (
    <div className={classes.root}>
      <CircularProgress
        variant="determinate"
        className={classes.bottom}
        size={40}
        thickness={4}
        {...props}
        value={100}
      />
      <CircularProgress
        variant="determinate"
        disableShrink
        className={classes.top}
        classes={{
          circle: classes.circle
        }}
        size={40}
        thickness={4}
        value={33}
        {...props}
      />
    </div>
  );
}