css - Mui LinearProgress Bar 停止显示在 display flex 上

Question

我正在尝试使用 Material 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 但它使它们消失，我也尝试了内联块并且得到了相同的结果。

Answer 1

包裹您的 <LinearProgress>与 <Grid> 成分。

<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项之间。