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

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"> 中，设置了对弹性布局的引用。在主要内容的开头有一个<div className={classes.toolbar} /> 女巫在主要内容之前设置了一个空格，因此AppBar 不会隐藏它。

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