如何使用 Material-UI 在 Appbar 下方打开下拉菜单？

Question

我是 Material-UI 的新手，刚开始 用 Menu example 摆弄他们的 App bar 。切换菜单下拉菜单时，它会在 Appbar 本身上打开，而我希望它在导航栏下方打开。

从文档中，我了解到这可以通过 anchorEl 来完成，如此 处 所述。但是当我在我的 menu 组件上实现这个时，什么也没有发生。什么是“正确的材料 UI 方式”来解决这个问题？

 class Header extends React.Component {
  state = {
    auth: true,
    anchorEl: null,
    anchorOriginVertical: 'bottom',
    anchorOriginHorizontal: 'right',
    transformOriginVertical: 'top',
    transformOriginHorizontal: 'right',
    anchorReference: 'anchorEl',
  };

  handleChange = (event, checked) => {
    this.setState({ auth: checked });
  };

  handleMenu = event => {
    this.setState({ anchorEl: event.currentTarget });
  };

  handleClose = () => {
    this.setState({ anchorEl: null });
  };

  render() {
    const { classes } = this.props;
    const { auth, anchorEl } = this.state;
    const open = Boolean(anchorEl);

    return (
      <div className={classes.root}>
        <AppBar position="static">
          <Toolbar>
            <Typography type="title" color="inherit" className={classes.flex}>
              Title
            </Typography>
            {auth && (
              <div>
                <IconButton
                  aria-owns={open ? 'menu-appbar' : null}
                  aria-haspopup="true"
                  onClick={this.handleMenu}
                  color="contrast"
                >
                  <AccountCircle />
                </IconButton>
                <Menu
                  id="menu-appbar"
                  anchorEl={anchorEl}
                  open={open}
                  onClose={this.handleClose}
                >
                  <MenuItem onClick={this.handleClose}>Profile</MenuItem>
                  <MenuItem onClick={this.handleClose}>My account</MenuItem>
                </Menu>
              </div>
            )}
          </Toolbar>
        </AppBar>
      </div>
    );
  }
}

原文由 Stiño 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

我有一个类似的问题，我让它工作的方式是通过设置菜单本身的属性，如下所示：

   <Menu
    id="menu-appbar"
    anchorEl={anchorEl}
    getContentAnchorEl={null}
    anchorOrigin={{ vertical: "bottom", horizontal: "center" }}
    transformOrigin={{ vertical: "top", horizontal: "center" }}
    open={open}
    onClose={this.handleClose}
    className={props.classes.menu}
  >

我必须输入 getContentAnchorEl={null} 才能使垂直属性起作用，我最终从这个问题 https://github.com/mui-org/material-ui/issues/7961 中学到了这一点。

在使用状态设置锚元素的属性时不确定如何执行此操作，但也许这会让您入门。

原文由 Emmy 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

这是我的解决方案，希望这会对某人有所帮助。

 <Menu
  open={this.state.openProps}
  anchorEl={this.state.anchorEl}
  onClose={onClose}
  className={classes.styles}
  disableAutoFocusItem
  PaperProps={{
    style: {
      left: '50%',
      transform: 'translateX(-77%) translateY(32%)',
    }
  }}
  MenuListProps={{
    style: {
      padding: 0,
    },
  }}
>

原文由 Davit Mkrtchyan 发布，翻译遵循 CC BY-SA 4.0 许可协议