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>

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

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>

现场演示

您可以在项目之间设置不同的间距和比例。