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

Posted 2023-04-13

【中文标题】为啥我的 MUI 分隔线没有出现在 MUI 容器或纸张中？

【英文标题】：Why does my MUI Divider not show up in a MUI Container or Paper?为什么我的 MUI 分隔线没有出现在 MUI 容器或纸张中？

【发布时间】：2021-04-10 13:47:02

【问题描述】：

早上好，

我爱上了 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>

【参考方案1】：

我同意，Material-UI 真的很棒。 在本期中，您将 display:'flex' 提供给父容器。通过提供flex，子元素会采用最小可能的宽度，因为flex-shrink 默认存在于子元素上。 所以，这里有Divider，但它的宽度为0。将宽度设置为100%。

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

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