如何用MUI v5 CircularProgress实现同时展示三个数值的环形进度条

核心修改点 #

• 让三个CircularProgress同心嵌套，通过调整尺寸和定位实现层级展示
• 修复原代码中sx={{ color: 'yellow }}的语法错误（缺少闭合引号）
• 添加数值文本，直观展示三个进度值

修改后的完整代码 #

import { Box, CircularProgress, Typography } from '@mui/material';
import styled from '@emotion/styled';

const StyledBox = styled(Box)`
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50px;
  height: 50px;
`;

interface Props {
  a: number;
  b: number;
  c: number;
}

export const StatusCircle: React.FC<Props> = ({ a, b, c }) => {
  return (
    <StyledBox>
      {/* 最外层红色进度环 */}
      <CircularProgress
        size={50}
        thickness={4}
        variant='determinate'
        sx={{ color: 'red', position: 'absolute' }}
        value={a}
      />
      {/* 中间层绿色进度环 */}
      <CircularProgress
        size={42}
        thickness={4}
        variant='determinate'
        sx={{ color: 'green', position: 'absolute' }}
        value={b}
      />
      {/* 最内层黄色进度环 */}
      <CircularProgress
        size={34}
        thickness={4}
        variant='determinate'
        sx={{ color: 'yellow' }}
        value={c}
      />
      {/* 中心显示三个数值 */}
      <Box sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
        <Typography variant="caption" sx={{ color: 'red' }}>{a}%</Typography>
        <Typography variant="caption" sx={{ color: 'green' }}>{b}%</Typography>
        <Typography variant="caption" sx={{ color: 'yellow' }}>{c}%</Typography>
      </Box>
    </StyledBox>
  );
};

关键细节说明 #

1. 同心嵌套布局：外层StyledBox设为相对定位，内部三个进度环用绝对定位叠加，依次减小size形成三层同心结构，确保每个环无遮挡、清晰可见。
2. 数值关联展示：中心用对应颜色的文本显示三个进度值，让数值与进度环一一对应，直观传递数据。
3. 语法修复：补全了原代码中yellow的闭合引号，避免渲染报错。

如果需要将数值放在对应进度环的外侧，可以给每个数值文本单独设置绝对定位，调整位置匹配环的层级。

内容的提问来源于stack exchange，提问作者Richardson