Why does my MUI Divider not show up in a MUI Container or Paper?

user_14745480 0
Viewed 8689

Good morning,

I am in love with MUI, there is so much one can do. However, after using it extensively, I have noticed that a MUI Divider does not show up when it is the child of a Container or Paper component. I can't find anything as to why this is the case, so it is probably my implementation. Could someone check it out and see why it isn't appearing?

Everything is imported, the Popover works fine.

Thank you!

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>

material-ui reactjs divider javascript
1 Answers

I agree, Material-UI is really awesome.
In this issue, you're giving display:'flex' to the parent container. By giving flex, the child elements take the minimum possible width as flex-shrink is there on child elements by default.
So, here the Divider is there but its width is 0. Provide width to 100%.

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

Check the demo here:- https://codesandbox.io/s/happy-euler-2ycv4

user_112222820
Related