如何从MaterialUI抽屉中删除边距/填充?

时间:2018-07-05 17:39:59

标签: reactjs user-interface redux material-ui

我正在使用MaterialUI创建一个Appbar和抽屉的React应用。

窗口边缘和抽屉之间有多余的空间。

多余的空间也覆盖了IconButton,我可以使用它来切换打开和扩展抽屉。看起来像这样:

enter image description here

这是我渲染应用栏和抽屉的方式:

render(){
    const { classes,drawerOpen,theme } = this.props;
    return(
      <React.Fragment>
        <AppBar
          position="absolute"
          className={classNames(classes.appBar,drawerOpen && classes.appBarShift)}
        >
        <Toolbar disableGutters={!this.state.open}>
          <IconButton
            color="inherit"
            aria-label="open drawer"
            onClick={this.handleDrawerOpen}
            className={classNames(classes.menuButton, drawerOpen && classes.hide)}
          >
            <ToggleLeft />
          </IconButton>
          <Typography variant="title" color="inherit" noWrap>
            MYAPP
          </Typography>
        </Toolbar>
      </AppBar>
      <Drawer
        variant="permanent"
        classes={{
          paper: classNames(classes.drawerPaper, !drawerOpen && classes.drawerPaperClose),
        }}
        open={this.state.open}
      >
        <div className={classes.toolbar}>
          <IconButton onClick={this.handleDrawerClose}>
            {theme.direction === 'rtl' ? <ToggleLeft />:<ToggleRight />}
          </IconButton>
        </div>
        <Divider />
          <List><SideAccountsList {...this.props}/></List>
      </Drawer>
      </React.Fragment>
      )
  }

0 个答案:

没有答案