时间戳

首页 > 解决方案 > 隐藏在抽屉导航器后面的内容

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

问题描述

我正在使用 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;
}

标签： javascriptcssreactjstypescriptmaterial-ui

解决方案

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

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

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

推荐阅读