@H_403_1@我有一个Appbar和它下面的抽屉.在这两个组件下我有3个带有bootstrap的div,在每个div中我有一组按钮.
@H_403_1@问题是抽屉覆盖了Appbar,我似乎无法移动它.
@H_403_1@这是我的代码：
@H_403_1@
在第一个引导列之后,接着是另一个“col-sm-4”,然后是“col-sm-2”.按钮位于GridList中
这是一个视觉
@H_403_1@抽屉应该从箭头相遇的地方开始.
@H_403_1@有任何想法吗？
最佳答案
Material-UI文档称之为clipped under the app bar的Drawer.要实现它,首先必须为AppBar定义样式对象的z-index：
@H_403_1@
const styles = theme => ({
appBar: {
// Make the app bar z-index always one more than the drawer z-index
zIndex: theme.zIndex.drawer + 1,},});
@H_403_1@然后将其应用于AppBar组件：
@H_403_1@
由于您的抽屉现在位于AppBar下方,因此您需要将抽屉中的内容向下移动到屏幕下方,以便它不会隐藏在栏下方.您可以使用theme.mixins.toolbar完成此操作.首先,添加工具栏样式：
const styles = theme => ({
appBar: {
zIndex: theme.zIndex.drawer + 1,// Loads information about the app bar,including app bar height
toolbar: theme.mixins.toolbar,});
然后,将以下div添加为抽屉中的第一个内容：
工具栏样式将从当前主题加载有关应用栏高度的信息,然后调整div的大小,以确保应用栏不会隐藏内容.
您可以找到完整的代码示例here.
