如何将Material UI中的菜单定位到某个位置?

时间:2021-03-17 11:06:46

标签: css reactjs material-ui

我刚开始反应。很抱歉乱码。但是当我通过单击配置文件按钮打开菜单时,它会打开菜单弹出到页面的左上角。有人能帮我把它放在个人资料按钮下面吗?在开发人员工具中检查控制台。警告来了。提供给组件的 anchorEl 属性无效。

function NavBar(props) {
  const [anchorEl, setAnchorEl] = React.useState(null);

  const AppBars = withStyles({
    root: {
      background: "black",
      height: "55px",
      position: "sticky",
      alignItems: "center"
    }
  })(AppBar);
  const MainButtons = withStyles({
    root: {

      background: "black",
      color: "white",
      marginTop: "10px",
      marginLeft: "25px",
      marginRight: "25px",
      "&:hover": {
        background: "Grey",
        color: "white",
      },
      //label: {
      // textTransform: "italiac"
      //  }
    }

  })(Button);

  const handleClick = (event) => {
    setAnchorEl(event.currentTarget);
  };

  const handleClose = () => {
    setAnchorEl(null);
  };
  return ( <
    div className = "header_div" >
    <
    AppBars >
    <
    div className = "buttn_div" >
    <
    MainButtons variant = "contained"
    className = "main_buttons" > Dashboard < /MainButtons> <
    MainButtons variant = "contained"
    className = "main_buttons" > Dashboard < /MainButtons> <
    MainButtons variant = "contained"
    className = "main_buttons" > Dashboard < /MainButtons> <
    MainButtons variant = "contained"
    className = "main_buttons" > Dashboard < /MainButtons> <
    /div> <
    div className = "prof_button" >
    <
    MainButtons variant = "contained"
    aria - controls = "simple-menu"
    aria - haspopup = "true"
    onClick = {
      handleClick
    } >
    <
    AccountCircleIcon / > Profile <
    /MainButtons> <
    /div> <
    Menu id = "simple-menu"
    anchorEl = {
      anchorEl
    }
    color = "inherit"

    open = {
      Boolean(anchorEl)
    } >
    <
    MenuItem color = "inherit"
    onClick = {
      handleClose
    } > Profile < /MenuItem> <
    MenuItem color = "inherit"
    onClick = {
      handleClose
    } > My account < /MenuItem> <
    MenuItem color = "inherit"
    onClick = {
      handleClose
    } > Logout < /MenuItem> <
    /Menu>



    <
    /AppBars >

    <
    /div >
  );
}

0 个答案:

没有答案
相关问题