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

问题描述 投票：0回答：5

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

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

如何更改轨迹颜色

javascript css responsive-design material-ui
5个回答
6
投票
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>

4
投票

你可以通过这样的方式添加样式:

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

只需使用扩展半径即可。

4
投票

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 {
        }
    }
}

1
投票

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

0
投票

对我来说最好的解决方案就是在彼此的顶部插入两个图标，一个带有主色图标，另一个带有辅助背景色。像这样：

<Box position={'relative'}>
 <CircularProgress
   variant='determinate'
   value={100}
   sx={theme => ({ color: theme.palette.grey[300] })}
   thickness={4}
 />
 <CircularProgress
   variant='determinate'
   value={[relative value here]}
   color='success'
   sx={{ position: 'absolute', left: 0 }}
   thickness={5}
  />
</Box>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.