【问题标题】:Material UI Vertical Divider within Grid not showing网格内的材质 UI 垂直分隔线未显示
【发布时间】:2022-01-04 20:25:43
【问题描述】:

我试图在网格中放置一个垂直的<divider>,但它没有显示。当我将其删除并且不将其放在 <Grid Item> 中时,它会显示,但我认为这不是正确的方法。这里缺少什么:

<Grid container justifyContent="space-between" spacing={1}>
    <Grid item>
        <Grid container alignItems="center" spacing={2}>
            <Grid item>
                Something
            </Grid>
            <Grid item >
                <Divider orientation="vertical" variant="middle" flexItem />
            </Grid>   
            <Grid item>
                Something else
            </Grid>         
        </Grid>
    </Grid>
</Grid>

【问题讨论】:

    标签: reactjs material-ui


    【解决方案1】:

    只要没有周围的 Grid 项目就可以了:

    <Grid container justifyContent="space-between" spacing={1}>
      <Grid item>
        <Grid container alignItems="center" spacing={2}>
          <Grid item>Something</Grid>
          <Divider orientation="vertical" flexItem />
          <Grid item>Something else</Grid>
        </Grid>
      </Grid>
    </Grid>
    

    请参阅官方文档中的Vertical with text example

    【讨论】:

    • 谢谢。我在某处读过这不是最佳做法,但显然很好。如何在上面的示例中更改分隔线的高度?当我添加 style={{height="50%"}} 它失败了。
    猜你喜欢
    • 2019-08-11
    • 2020-05-14
    • 1970-01-01
    • 1970-01-01
    • 2023-03-09
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多