Question

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

问题在于抽屉覆盖了Appbar，我似乎无法移动它。

这是我的代码：

<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

中

这是一个视觉

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

有什么想法吗？

Answer 1

Material-UI文档称抽屉为clipped under the app bar。要实现这一目标，首先必须为z-index AppBar个styles对象定义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加载有关应用栏高度的信息，然后调整Spring Boot的大小，以确保内容不被隐藏app bar。

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

材质UI抽屉不会在Appbar下移动

1 个答案: