如何使用Material-UI在Appbar下面打开下拉菜单? [英] How to make a dropdown menu open below the Appbar using Material-UI?

问题描述

我是Material-UI的新手，刚刚开始摆弄他们的带有菜单示例的应用栏.切换菜单下拉菜单时，它会在应用栏上方打开，而我希望它在导航栏下方打开.

I'm new to Material-UI and just started fiddling around with their App bar with Menu example. When toggling the menu dropdown, it opens up over the Appbar itself, whereas I'd like it to open below the Navbar.

从文档中，我了解可以使用 anchorEl 完成此操作，如此处.但是，当我将其实现到我的 menu 组件时，什么也没有发生.什么是正确的材料-UI方式"?照顾这个?

From the docs, I understand that this can be done with anchorEl as explained here. But when I implement this to my menu component nothing happens. What is "the right material-UI way" to take care of this?

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>
    );
  }
}

推荐答案

我遇到了类似的问题，而让它起作用的方法是通过在菜单本身上设置属性，如下所示:

I had a similar issue and the way I got it to work is by setting the properties on the menu itself like this:

  <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} 才能使垂直属性起作用，我最终从本期

I had to put in getContentAnchorEl={null} to get the vertical properties to work, which I eventually learned from this issue https://github.com/mui-org/material-ui/issues/7961 .

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

Not sure how to do this when using the state to set the properties of the anchor element, but maybe this will get you started.

这篇关于如何使用Material-UI在Appbar下面打开下拉菜单?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！