gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-04 12:59:22 28 4
gpt4 key购买 nike

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

最佳答案

包裹您的 <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>

现场演示

Edit romantic-sun-dt6ie

您可以设置不同的 spacingratios项之间。

关于css - Mui LinearProgress Bar 停止显示在 display flex 上,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60759457/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com