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不会隐藏它。

在“材料”示例和您的“示例”上使用检查，并比较差异。

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

1 个答案: