javascript - 隐藏在抽屉导航器后面的内容

Question

我使用 Material UI 永久抽屉作为组件。我在不同的页面中调用该组件，并在其中添加主要内容。然而，我的主要内容隐藏在抽屉的工具栏和侧边栏后面。

我该如何解决这个问题？它可能需要一些样式，但我无法弄清楚。我怎样才能将它包装在一个所有的内容在主要部分中可见的地方？ 抽屉组件代码:

const drawerWidth = 240;

const useStyles = makeStyles((theme: Theme) =>
  createStyles({
    root: {
      display: 'flex',
    },
    appBar: {
      width: `calc(100% - ${drawerWidth}px)`,
      marginLeft: drawerWidth,
    },
    drawer: {
      width: drawerWidth,
      flexShrink: 0,
    },
    drawerPaper: {
      width: drawerWidth,
    },

    panelheaderRight:{
        marginRight: 0,
        right: 0,
    },
    toolbar: theme.mixins.toolbar,
    content: {
      flexGrow: 1,
      backgroundColor: theme.palette.background.default,
      padding: theme.spacing(3),
    },
  }),
);
const icons = [<HomeIcon/>,<MailIcon/>,<LocalTaxiIcon/>,<PeopleIcon/>]
const icons2 = [<RoomIcon/>,<LocalTaxiIcon/>,<PeopleIcon/>]

export default function PermanentDrawerLeft() {
  const classes = useStyles();

  return (
    <div className={classes.root}>
      <CssBaseline />
      <AppBar position="fixed" className={classes.appBar}>
        <Toolbar>
          <Typography variant="h6" noWrap>
            Admin Panel
          </Typography>
          <NotificationsIcon className='panelheaderRight'/>
          <ExitToAppIcon className='panelheaderRight'/>
        </Toolbar>
      </AppBar>
      <Drawer
        className={classes.drawer}
        variant="permanent"
        classes={{
          paper: classes.drawerPaper,
        }}
        anchor="left"
      >
        <div className={classes.toolbar} />
        <Divider />
        <List>
          {['Home','Inbox', 'Rides', 'Users'].map((text, index) => (
            <ListItem button key={text}>
              <ListItemIcon>{icons[index]}</ListItemIcon>
              <ListItemText primary={text} />
            </ListItem>
          ))}
        </List>
      </Drawer>
    </div>
  );
}

我调用抽屉的页面代码:

const NewPage = () => (
    <div>
    <PermanentDrawerLeft></PermanentDrawerLeft>
    <main className='content'>
    <Typography paragraph>
          Consequat mauris nunc congue nisi vitae suscipit. Fringilla est ullamcorper eget nulla
          facilisi etiam dignissim diam. Pulvinar elementum integer enim neque volutpat ac
          tincidunt. Ornare suspendisse sed nisi lacus sed viverra tellus. Purus sit amet erra.
        </Typography>
      </main>
    </div>

);

export default NewPage;

我尝试将此样式添加到我的 NewPage 中，但没有什么区别:

.content{
    padding-top: 1000;
    padding-left: 1000;
}

Answer 1

注意示例中的布局。(我猜你是基于 - https://material-ui.com/components/drawers/#responsive-drawer )

抽屉设置在 <nav className={classes.drawer} aria-label="mailbox folders">女巫设置对 flex 布局的引用。在主要内容的开头有一个 <div className={classes.toolbar} />女巫在主要内容之前设置了一个空格，因此 AppBar不会隐藏它。

对 Material 示例和您的示例使用检查并比较差异。