reactjs - Reactjs - 抽屉覆盖页面内容

Question

我决定从material-ui库中将Drawer组件实现到我的react项目中，如下所示:

class RightDrawer extends React.Component {
  state = {
    open: false,
  };

  handleDrawerOpen = () => {
    this.setState({ open: true });
  };

  handleDrawerClose = () => {
    this.setState({ open: false });
  };

  render() {
    const { classes, children, theme } = this.props;

    return (
      <div className={classes.root}>
        <AppBar
          position="absolute"
          className={classNames(classes.appBar, this.state.open && classes.appBarShift)}
        >
          <Toolbar disableGutters={!this.state.open}>
            <IconButton
              color="inherit"
              aria-label="Open drawer"
              onClick={this.handleDrawerOpen}
              className={classNames(classes.menuButton, this.state.open && classes.hide)}
            >
              <MenuIcon />
            </IconButton>
            <Typography variant="title" color="inherit" noWrap>
              Mini variant drawer
            </Typography>
          </Toolbar>
        </AppBar>
        <Drawer
          variant="permanent"
          classes={{
            paper: classNames(classes.drawerPaper, !this.state.open && classes.drawerPaperClose),
          }}
          open={this.state.open}
        >
          <div className={classes.toolbar}>
            <IconButton onClick={this.handleDrawerClose}>
              {theme.direction === 'rtl' ? <ChevronRightIcon /> : <ChevronLeftIcon />}
            </IconButton>
          </div>
          <Divider />

            <List>{mailFolderListItems}</List>
        </Drawer>
        <main className={classes.content}>
          <div className={classes.toolbar} />
          {children}
        </main>
      </div>
    );
  }
}

RightDrawer.propTypes = {
  classes: PropTypes.object.isRequired,
  theme: PropTypes.object.isRequired,
};

export default withStyles(styles, { withTheme: true })(RightDrawer);

因此，我将所有组件包装在 RightDrawer 组件中，然后通过 {children} 注入(inject)它们。 最终结果是:

因此它被裁剪为页面的 1/3，当表格填满时:

我应该将 Drawer 直接插入到 App.js 中，而不是将每个组件都包装在里面吗？也许是由 className={classes.root} 引起的？

Answer 1

您提供的问题描述和代码不足以回答此问题。 正如我到目前为止所发现的，如果您想要一个全高抽屉，您可以将 height 添加到您的根类中。 例如:

root: {
    height: '100vh',
}