Material UI Drawer 不会在 Appbar 下移动

IT技术 html css reactjs material-ui
2021-05-23 16:04:15

我在它下面有一个 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>

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

这是一个视觉

在此处输入图片说明

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

有任何想法吗？

1个回答

Material-UI 文档将其称为已在应用栏下剪辑的 Drawer 。要实现它，您首先必须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以确保内容不会被应用栏隐藏。

您可以在此处找到完整的代码示例。

其它你可能感兴趣的问题
上一篇react卸载和重新安装子组件 下一篇属性 'current' 不存在于类型 '((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement>'