为什么我的 MUI 分隔线没有出现在 MUI 容器或纸张中？

Question

早安，

我爱上了 MUI，一个人可以做的事情太多了。但是，在广泛使用它之后，我注意到当 MUI Divider 是 Container 或 Paper 组件的子组件时不会显示。我找不到任何关于为什么会这样的信息，所以这可能是我的实现。有人可以检查一下，看看为什么它没有出现吗？

一切都是进口的，Popover 工作正常。

谢谢！

navBarPopover: {
    display: "flex",
    flexDirection: "column",
    alignItems: "center",
    justifyContent: "center"
}

<Popover 
    id={id}
    open={open}
    anchorEl={anchorEl}
    onClose={handleClose}
    anchorOrigin={{
        vertical: "top",
        horizontal: "right",
    }}
    transformOrigin={{
        vertical: "top",
        horizontal: "right",
    }}
>
  <Container className={clsx(classes.navBarPopover)}>
      <Button className={clsx(classes.loginButton)} component={Link} to="/user_auth" onClick={() => handleClose()}>
          Login
      </Button>
      <Divider />
      <Button className={clsx(classes.loginButton)} component={Link} to="/faqs" onClick={() => handleClose()}>
          FAQs
      </Button>
  </Container>
</Popover>

Answer 1

我同意，Material-UI 真的很棒。
在本期中，您将

display:'flex'

赋予父容器。通过给定

flex

，子元素采用最小可能的宽度，因为默认情况下

flex-shrink

在子元素上。
所以，这里有

Divider

但它的宽度为 0。将宽度设置为 100%。

<Divider style={{width:'100%'}} />

在这里查看演示：- https://codesandbox.io/s/happy-euler-2ycv4

编辑：2023 年 2 月

正如@Lesik2008 在comment 中提到的，您也可以使用

flexItem

属性来指示这是弹性项目，它会相应地计算高度。将

flexItem

传递为

true

.
更小更干净。

<Divider flexItem />