Mui LinearProgress Bar停止在显示伸缩上显示

Question

我正在尝试使用材料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>
实时演示

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

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