如何在MaterialUI圆形图标与CircularProgress进度条之间设置间距

核心思路是调整环形进度条的尺寸，同时优化外层容器的定位规则，让两者自然产生间距，具体修改如下：

调整步骤 #

• 给每个承载进度条和图标的Grid item容器添加相对定位，以及居中属性，让内部元素相对于当前容器定位，避免全局定位导致的布局错乱
• 把CircularProgress的size属性设置为大于内部Paper的尺寸，两者的尺寸差可以根据你需要的间距大小自由调整，尺寸越大，进度条和内部图标之间的间距就越大
• 修正原代码中多余的</Grid>闭合标签，避免语法报错

修改后代码示例 #

import * as React from 'react';
import { Grid, Paper, Box, CircularProgress, circularProgressClasses } from '@mui/material';

const MileStones = () => {
    return (
      <Box sx={{ flexGrow: 1, display: 'flex', flexWrap: 'wrap', justifyContent: 'center', alignItems: 'center', pl: 2 }}>
        <Grid container spacing={1.4} sx={{ py: 4 }}>
          <Grid item xs sx={{ position: 'relative', display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
            {/* 进度条尺寸设为60，比Paper的50大10，可自行调整数值修改间距 */}
            <CircularProgress size={60} sx={{ color: '#C4C4C4', position: 'absolute' }} variant="determinate" value={100} />
            <Paper sx={{ background: '#162983', width: 50, height: 50, borderRadius: '50%'}}></Paper>
          </Grid>
          <Grid item xs sx={{ position: 'relative', display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
            <CircularProgress size={60} sx={{ position: 'absolute' }} variant="determinate" value={25} />
            <Paper elevation={3} sx={{ background: '#162983', width: 50, height: 50, textAlign: "center", borderRadius: '50%'}}></Paper>
          </Grid>
          <Grid item xs sx={{ position: 'relative', display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
            <CircularProgress size={60} sx={{ position: 'absolute' }} variant="determinate" value={25} />
            <Paper elevation={3} sx={{ background: '#162983', width: 50, height: 50, textAlign: "center", borderRadius: '50%'}}></Paper>
          </Grid>
          <Grid item xs sx={{ position: 'relative', display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
            <CircularProgress size={60} sx={{ position: 'absolute' }} variant="determinate" value={25} />
            <Paper elevation={3} sx={{ background: '#162983', width: 50, height: 50, textAlign: "center", borderRadius: '50%'}}></Paper>
          </Grid>
          <Grid item xs sx={{ position: 'relative', display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
            <CircularProgress size={60} sx={{ position: 'absolute' }} variant="determinate" value={25} />
            <Paper elevation={3} sx={{ background: '#162983', width: 50, height: 50, textAlign: "center", borderRadius: '50%'}}></Paper>
          </Grid>
        </Grid>
      </Box>
    )
}

export default MileStones

可选优化 #

如果需要更精细控制效果，也可以同时调整CircularProgress的thickness属性修改进度条本身的厚度，配合尺寸调整实现你想要的最终样式。

内容的提问来源于stack exchange，提问作者Vishal K.