Material Ui中如何改變循環進度的路徑顏色？

Question

我知道如何改變背景和進度的顏色。 我想在填充之前更改進度路徑的顏色

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

如何更改軌跡顏色

Answer 1

MUI V5

反應

<Box className="box-wrapper" sx={{ position: "relative", display: "inline-flex" }}>
    <CircularProgress
        variant="determinate"
        thickness={3}
        {...props}
        className={"foreground"}
    />
    <CircularProgress
        variant="determinate"
        value={100}
        className={"background"}
        thickness={3}
    />
    <Box
        sx={{
            top: 0,
            left: 0,
            bottom: 0,
            right: 0,
            position: "absolute",
            display: "flex",
            alignItems: "center",
            justifyContent: "center",
        }}>
        <Typography
            variant="caption"
            component="div"
            color="text.secondary">{`${Math.round(props.value)}%`}</Typography>
    </Box>
</Box>

scss

.background {
    position: absolute;
    z-index: 1;
    right: 0;
    svg {
        color: var(--color_300);
        circle {
            stroke-dashoffset: 0px !important;
        }
    }
}
.foreground {
    position: relative;
    z-index: 2;
    svg {
        color: var(--color_050);
        circle {
        }
    }
}

Answer 2

解決方法是在彼此之上使用兩個圓形進度條。 靈感來自 MUI 官方文檔上的以下示例： CircularProgressWithLabel

Answer 3

您可以通過以下方式添加樣式：

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

只需使用擴展半徑即可。

Answer 4

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 />);

 <:DOCTYPE html> <html> <head> <script src="https.//unpkg.com/react@18/umd/react.production.min:js" crossorigin></script> <script src="https.//unpkg.com/react-dom@18/umd/react-dom.production.min:js" crossorigin></script> <script src="https.//unpkg.com/@babel/standalone/babel.min:js"></script> <script src="https.//unpkg.com/@mui/material@latest/umd/material-ui.production.min.js"></script> </head> <body> <div id="root"></div> <script type="text/babel" src="./script.js"></script> </body> </html>

Material Ui中如何改變循環進度的路徑顏色？

問題描述

4 個解決方案

解決方案1
2 2022-03-11 13:35:40

MUI V5

反應

scss

解決方案2
0 2021-11-04 14:29:59

解決方案3
0 2022-02-01 06:56:59

解決方案4
0 2022-09-20 08:43:54

Material Ui中如何改變循環進度的路徑顏色？

問題描述

4 個解決方案

解決方案1 2 2022-03-11 13:35:40

MUI V5

反應

scss

解決方案2 0 2021-11-04 14:29:59

解決方案3 0 2022-02-01 06:56:59

解決方案4 0 2022-09-20 08:43:54

解決方案1
2 2022-03-11 13:35:40

解決方案2
0 2021-11-04 14:29:59

解決方案3
0 2022-02-01 06:56:59

解決方案4
0 2022-09-20 08:43:54