大佬教程收集整理的这篇文章主要介绍了html – Material UI Drawer不会在Appbar下移动，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
我有一个Appbar和它下面的抽屉.在这两个组件下我有3个带有bootstrap的div,在每个div中我有一组按钮.
问题是抽屉覆盖了Appbar,我似乎无法移动它.
这是我的代码：
在第一个引导列之后,接着是另一个“col-sm-4”,然后是“col-sm-2”.按钮位于GridList中
这是一个视觉
抽屉应该从箭头相遇的地方开始.
有任何想法吗？
最佳答案
@H_744_19@material-UI文档称之为clipped under the app bar的Drawer.要实现它,首先必须为AppBar定义样式对象的z-index：
const styles = theme => ({
appBar: {
// Make the app bar z-index always one more than the drawer z-index
zIndex: theme.zIndex.drawer + 1,},});
然后将其应用于AppBar组件：
由于您的抽屉现在位于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.
以上是大佬教程为你收集整理的html – Material UI Drawer不会在Appbar下移动全部内容，希望文章能够帮你解决html – Material UI Drawer不会在Appbar下移动所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。