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

Question

我正在尝试使用 Material-UI 创建一个确定的循环进度，如下所示:circular progress image

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

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

我检查了MUI Docs about Circular Progress但我找不到任何支持这种行为的 Prop 。据我所知，MUI 正在为循环进度使用单个 svg 组件，据我所知，它只能使用 2 个 svg 来实现，其中一个作为骨架，而另一个将作为加载进度。

我的问题是如何为循环进度添加额外的描边颜色/实现与 above image link 中所示相同的效果？任何帮助是极大的赞赏。谢谢!

Answer 1

查看 Customization文档部分。

简而言之，是的，您需要第二个 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>
  );
}