我正在使用MaterialUI创建一个Appbar和抽屉的React应用。
窗口边缘和抽屉之间有多余的空间。
多余的空间也覆盖了IconButton,我可以使用它来切换打开和扩展抽屉。看起来像这样:
这是我渲染应用栏和抽屉的方式:
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>
)
}