javascript - How to display Material UI drawer with top margin - Stack Overflow

admin管理员组

文章数量:1351972

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?

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?

• javascript
• css
• reactjs
• material-ui

Share Improve this question Follow asked Jul 31, 2020 at 9:18 LaraLara 3,03199 gold badges4444 silver badges8181 bronze badges 4

• Hello. Let me see i get you. You want to apply margin-top on temporary drawer right? – Edson Magombe Commented Jul 31, 2020 at 9:33
• Why not use clipped drawer material-ui./ponents/drawers/#ClippedDrawer.js – Edson Magombe Commented Jul 31, 2020 at 9:34
• @EdsonMagombe yes. – Lara Commented Jul 31, 2020 at 9:34
• Why not use clipped drawer material-ui./ponents/drawers/#ClippedDrawer.js – Edson Magombe Commented Jul 31, 2020 at 9:51

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 10

Set the marginTop to drawerPaper instead

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

const classes = useStyles();

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

In MUI V5:

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

本文标签： javascriptHow to display Material UI drawer with top marginStack Overflow