Mui LinearProgress Bar перестает отображаться на дисплее flex

Question

Я пытаюсь создать пользовательский график с использованием пользовательского интерфейса материала. Моя идея - расположить 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>

Live демо

Вы можете установить различные значения интервал и крыса ios между элементами.