Material UI Drawer 不会在 Appbar 下移动

Posted 2023-02-22

【中文标题】Material UI Drawer 不会在 Appbar 下移动

【英文标题】：Material UI Drawer won't move under Appbar

【发布时间】：2018-08-09 15:44:40

【问题描述】：

我在它的正下方有一个 Appbar 和一个抽屉。在这两个组件下，我有 3 个带有引导程序的 divs，在每个 div 中，我有一组按钮。

问题是抽屉覆盖了应用栏，我似乎无法移动它。

这是我的代码：

<div className="App">

        <AppBar position="static">
          <Toolbar>
              <IconButton color="inherit" aria-label="Menu">
                <MenuIcon />
              </IconButton>
              <Typography variant="title" color="inherit" aria-label="Menu">
                title
              </Typography>
          </Toolbar>
        </AppBar>

        <Drawer
          variant="permanent"
          style=width: '100%', zIndex: '1400', position:'absolute'
        >
          <Button>1</Button>
          <Button>2</Button>
          <Divider />
          <Button>1</Button>
          <Button>2</Button>
        </Drawer>
        <br />
        <div className="container-full">
          <div className="row">
            <div class="col-sm-6">  
              <GridList cellHeight=50 className=styles.gridList cols=5>

                <Button style=width: '150px', border: '1px solid' variant="raised" color="primary">
                  <div 
                  style=fontSize:'12px', display: 'flex', justifyContent: 'center', textAlign:'center'>
                    Mohnweckerl Wiener Gouda
                  </div>
                </Button>

在第一个引导列之后，另一个 "col-sm-4" 紧随其后，然后是 "col-sm-2"。按钮位于GridList

这是一个视觉效果

抽屉应该从箭头相遇的地方开始。

有什么想法吗？

【问题讨论】：

尝试使抽屉的 z-index 小于应用栏的 z-index（您可能需要使用 !important 才能使其生效）。您还需要在抽屉顶部添加 56 像素的填充。

如果我将paddingTop:56 或padding:56 添加到抽屉中，它只会按下我的按钮。抽屉保持原样。

对，所以你还需要增加导航栏的 z-index，或者减少抽屉的 z-index。即，假设您想增加导航栏的 z-index。你可以使用z-index: 24 !important;

<AppBar position="absolute" style=zIndex: 24> 和抽屉内联style=position:'relative', zIndex: 1, paddingTop:'56px !important' - 看起来像this

编辑：对不起，我看错了你的评论。让我快速研究一下

【参考方案1】：

Material-UI 文档称其为 Drawer，它一直是 clipped under the app bar。要实现它，您首先必须为您的AppBar 和您的styles 对象定义一个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 position="absolute" className=classes.appBar>

由于您的抽屉现在位于AppBar 下方，因此您需要将抽屉中的内容向下移动到屏幕下方，使其不会隐藏在栏下方。您可以使用theme.mixins.toolbar 完成此操作。首先，添加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 作为抽屉中的第一条内容：

<Drawer>
  // Make sure this div is the first piece of content in your drawer
  <div className=classes.toolbar />

  // Put your other drawer content here like you normally would
</Drawer>

toolbar 样式将从当前theme 加载有关应用栏高度的信息，然后调整div 的大小，以确保内容不会被应用栏隐藏。

您可以找到完整的代码示例here。

【讨论】：

现在它看起来像this.<AppBar position="absolute" style=zIndex: 2 和抽屉style=position:'relative', zIndex: 1 variant="permanent" 按钮在抽屉后面，但我用paddingLeft:100和paddingRight:100解决了它。

对 - 这是因为您在没有编辑按钮的 z-index 的情况下硬编码抽屉的 z-index。使用主题中的 z-index 值可以通过确保所有深度相对于彼此正确来避免该问题。

所以所有三个组件都需要不同的 zIndex，对吧？ Appbar 的zIndex 是theme.zIndex.drawer + 1，抽屉是2，而按钮所在的<div> 是4。不知何故，按钮仍然被按下，抽屉不会移动。我也无法访问className=classes.appBar 中的classes，只能访问styles.appBar。

正如您正确推断的那样，classes 来自props。我通常在每个render 方法的顶部做类似const classes = this.props 的事情。您也可以在完整的代码示例中看到这一点。

如果你是extending Component，那么它必须是const classes = this.props（注意this.）。