Mui LinearProgress Bar 停止在 display flex 上显示答案

【问题标题】：Mui LinearProgress Bar stops displaying on display flexMui LinearProgress Bar 停止在 display flex 上显示
【发布时间】：2020-06-30 17:20:39
【问题描述】：

我正在尝试使用材质 UI 制作自定义项目符号图，我的想法是 2 个 MuiLinearProgress 条彼此相邻，中间有一个垂直分隔线。我似乎找不到将它们并排显示的方法。

<div className={classes.bulletGraph}>
  <div>
  <LinearProgress
    className={classes.firstBar}
    value={80}
    variant="determinate"
    title="test"
  />
  </div>
  <div>

  <LinearProgress
    className={classes.secondBar}
    value={0}
    variant="determinate"
  />
  </div>
</div>

我尝试在父级上使用 display flex，但它使它们消失，我也尝试了内联块，我得到了相同的结果。

【问题讨论】：

标签： css reactjs flexbox material-ui

【解决方案1】：

用<Grid> 组件包裹你的<LinearProgress>。

<Grid spacing={1} container>
    <Grid xs item>
        <LinearProgress value={80} variant="determinate" title="test" />
    </Grid>
    <Grid xs item>
        <LinearProgress color="secondary" value={0} variant="determinate" />
    </Grid>
</Grid>

现场演示

您可以在项目之间设置不同的spacing 和ratios。

【讨论】：