CODEWITHSUNDEEP
javascriptcssreactjsmaterial-ui
Lara
Lara

Reputation: 3021

How to display Material UI drawer with top margin

I am trying to implement Material UI drawer with some top margin instead of starting from very top of the page, but its not happening, i have tried applying marginTop but its not happening. here is the codeSandBox link Drawer.

How to apply top margin?

Upvotes: 3

Views: 6263

Answers (2)

Mohammad Fallah
Mohammad Fallah

Reputation: 1110

In MUI V5:

       <Drawer
            anchor={'top'}
            open={isOpen}
            hideBackdrop
            onClose={() => onClose()}
            sx={{
              '&.MuiDrawer-root .MuiDrawer-paper': { marginTop: '67px' },
            }}
          >
            {children}
          </Drawer>

Upvotes: -1

brijesh-pant
brijesh-pant

Reputation: 1145

Set the marginTop to drawerPaper instead

const useStyles = makeStyles({
  drawerPaper: {
    marginTop: "50px"
  }
});

const classes = useStyles();

<Drawer
  classes={{
    paper: classes.drawerPaper
  }}
>
  {sideList("left")}
</Drawer>

Upvotes: 10

Related Questions