Mui LinearProgress设display:flex后消失，如何实现双进度条并排的子弹图？

我来帮你搞定这个问题！你遇到的进度条消失情况，核心原因是Material UI的LinearProgress组件默认样式和flex/inline-block布局的宽度处理冲突了——默认情况下它是块级元素，在flex容器里如果没给它分配宽度，就会收缩到0，看起来像消失了。下面给你一套完整的解决方案：

第一步：修正布局样式，让进度条正常显示 #

我们需要给父容器设置flex布局，同时给每个进度条（或它的容器）添加flex:1属性，确保它们能平分可用宽度。另外添加垂直分隔线时，让它自动占满父容器的高度，不用手动写死height。

完整代码示例 #

样式部分（用Material UI的makeStyles）

import { makeStyles } from '@material-ui/core/styles';
import LinearProgress from '@material-ui/core/LinearProgress';

const useStyles = makeStyles({
  bulletGraph: {
    display: 'flex',
    alignItems: 'center', // 让进度条和分隔线垂直居中对齐
    gap: '10px', // 控制进度条和分隔线之间的间距
    padding: '4px 0', // 可选：给整体加一点上下内边距，让分隔线看起来更协调
  },
  progressItem: {
    flex: 1, // 关键：让每个进度条占据均等的可用宽度
    height: '16px', // 可选：自定义进度条高度
  },
  divider: {
    width: '2px',
    backgroundColor: '#999', // 分隔线颜色
    alignSelf: 'stretch', // 让分隔线自动占满父容器的高度
  },
  firstBar: {
    backgroundColor: '#f0f0f0', // 自定义进度条背景色
    '& .MuiLinearProgress-bar': {
      backgroundColor: '#2196f3', // 自定义已完成部分的颜色
    },
  },
  secondBar: {
    backgroundColor: '#f0f0f0',
    '& .MuiLinearProgress-bar': {
      backgroundColor: '#4caf50',
    },
  },
});

组件部分

function CustomBulletGraph() {
  const classes = useStyles();

  return (
    <div className={classes.bulletGraph}>
      <LinearProgress
        className={`${classes.progressItem} ${classes.firstBar}`}
        value={80}
        variant="determinate"
        title="test"
      />
      {/* 垂直分隔线 */}
      <div className={classes.divider} />
      <LinearProgress
        className={`${classes.progressItem} ${classes.secondBar}`}
        value={0}
        variant="determinate"
      />
    </div>
  );
}

关键知识点解释 #

1. flex:1的作用：给进度条添加这个属性后，它会自动占据flex容器里的剩余可用空间，多个进度条会平分宽度，不会因为没有明确宽度而收缩消失。
2. 分隔线的alignSelf:stretch：这个属性让分隔线的高度自动匹配父容器的高度，不用手动设置固定值，适配性更强。
3. 自定义进度条颜色：通过嵌套选择器& .MuiLinearProgress-bar可以覆盖Material UI默认的进度条颜色，实现更个性化的样式。

如果你之前用inline-block布局，其实原理类似——需要给每个进度条设置width: calc(50% - 5px)（减去分隔线和间距的宽度），但flex布局显然更灵活好维护。

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