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

Question

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

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

如何更改轨迹颜色

Answer 1

const size = 120,
      thickness = 9,
      value = 22,
      secColor = '#d1d1d1';

const progressSx = {
   borderRadius: '50%',
   boxShadow: `inset 0 0 0 ${thickness/44*size}px ${secColor}`,
};

<CircularProgress variant='determinate' size={size} thickness={thickness} value={value} sx={progressSx} />

const size = 120,
      thickness = 9,
      value = 22,
      secColor = '#d1d1d1';

const progressSx = {
   borderRadius: '50%',
   boxShadow: `inset 0 0 0 ${thickness/44*size}px ${secColor}`,
};

<CircularProgress variant='determinate' size={size} thickness={thickness} value={value} sx={progressSx} />

function App() {
    const { CircularProgress } = MaterialUI;
    
    const size = 120,
      thickness = 9,
      value = 22,
      secColor = '#d1d1d1';
    
    const progressSx = {
        borderRadius: '50%',
        boxShadow: `inset 0 0 0 ${thickness/44*size}px ${secColor}`,
    };

    return (
        <div className="App">
            <CircularProgress variant='determinate' size={size} thickness={thickness} value={value} sx={progressSx} />
        </div>
    );
  }

const container = document.getElementById('root');
const root = ReactDOM.createRoot(container);
root.render(<App />);

Answer 2

解决方法是使用两个相互重叠的圆形进度条。受到 MUI 官方文档上以下示例的启发：CircularProgressWithLabel