Material Ui中如何改变循环进度的路径颜色？答案

【问题标题】：How to change the path colour of circular progress in Material Ui?Material Ui中如何改变循环进度的路径颜色？
【发布时间】：2021-09-13 06:19:02
【问题描述】：

我知道如何改变背景和进度的颜色。我想在填充之前更改进度路径的颜色

export const CircleProgress = withStyles(() => ({
  root: {
    width: '262px !important',
    height: '262px !important',
    transform: 'rotate(220deg) !important',
    color: 'blue',
  },
}))(CircularProgress);

如何更改轨迹颜色

【问题讨论】：

请澄清一下，什么样的路径？
圆的路径。

标签： javascript css responsive-design material-ui

【解决方案1】：

解决方法是使用两个相互叠加的圆形进度条。灵感来自 MUI 官方文档中的以下示例：CircularProgressWithLabel

【讨论】：

【解决方案2】：

您可以通过这种方式添加样式：

border-radius: 50%;
box-shadow: inset 0 0 1px 5px $color;
background-color: transparent;

只需使用扩展半径即可。

【讨论】：