reactjs - 抽屉覆盖 Material-ui 中的 AppBar
问题描述
我希望我的抽屉组件在 AppBar 组件下打开,而不是覆盖它。但是对于这个新版本的@Material-Ui/core,这从来没有被考虑过。
知道我该怎么做吗?
目前,它以涵盖 AppBar 的方式打开。这不是我想要的,我希望抽屉在 appBar 组件下打开,就像任何普通应用程序一样。
这是我的代码:
const styles = theme => ({
root: {
flexGrow: 1,
},
flex: {
flex: 1,
},
menuButton: {
marginLeft: -12,
marginRight: 20,
},
list: {
width: 250,
},
});
class ClippedDrawer extends React.Component {
constructor(props){
super(props);
this.state={
open: false,
}
}
toggleDrawer(){
this.setState({
open: !this.state.open,
});
};
render(){
const { classes } = this.props;
return(
<div className={classes.root}>
<AppBar position="relative" className={classes.appBar}>
<Toolbar>
<IconButton className={classes.menuButton} onClick={()=>this.toggleDrawer()} color="inherit" aria-label="Menu">
<MenuIcon />
</IconButton>
<Typography variant="title" color="inherit" className={classes.flex}>
Title
</Typography>
<Button color="inherit">Login</Button>
</Toolbar>
</AppBar>
<Drawer className={classes.drawer} open={this.state.open} onClose={()=>this.toggleDrawer()}>
<div
tabIndex={0}
role="button"
onClick={()=>this.toggleDrawer()}
onKeyDown={()=>this.toggleDrawer()}
>
<div className={classes.list}>
<List>ola</List>
<Divider />
<List>xau</List>
</div>
</div>
</Drawer>
</div>
);
}
}
ClippedDrawer.propTypes = {
classes: PropTypes.object.isRequired,
};
export default withStyles(styles)(ClippedDrawer);
解决方案
将 AppBar 的位置设置为相对:
appBar: {
...
position: 'relative',
zIndex: theme.zIndex.drawer + 1,
},
如果它不起作用,那么您可能还需要将 zIndex 显式设置为 1400。
推荐阅读
- python - 操作数据框字典
- sql - 需要计算这个 Interbase Distinct SQL
- c# - 用户登录后如何在 iOS 中注册推送通知?
- javascript - 如何从文本区域获取值并将其存储在变量中
- r - 如何根据组和总和有条件地变异?
- javascript - 通过键将数组列表的元素分组/连接在一起
- html - 无法在较新的詹金斯版本中使用页面标记插件
- python-3.x - selenium.common.exceptions.NoSuchElementException:消息:Python selenium 中没有此类元素错误,即使 HTML 中存在 ID 和名称
- c# - ASP .NET Core - 如何判断数据协定属性是否未设置或设置为 null
- java - 我的 ArrayList 两次打印同一个对象