Css 如何在物料界面中设置下拉菜单位置

我正在建立一个盖茨比应用程序，我想一旦菜单图标被点击，我的菜单将下拉右下方的和宽度为100%。这是我的密码：

我试图通过在组件内部设置此选项来解决问题，但组件根本没有改变：

          getContentAnchorEl={null}
          anchorEl={anchorEl}
          anchorOrigin={{
            vertical: 'bottom',
            horizontal: 'left',
          }}
          transformOrigin={{
            vertical: 'bottom',
            horizontal: 'center',
          }}
          

import React，{useState}来自“React”；
从'@material ui/core/styles'导入{makeStyles}；
从“@material ui/core/AppBar”导入AppBar；
从“@material ui/core/Toolbar”导入工具栏；
从“@material ui/core/Typography”导入排版；
从“@material ui/core/IconButton”导入IconButton；
从“@material ui/icons/Menu”导入菜单图标；
从“@material ui/core/MenuItem”导入菜单项
从'@material ui/core'导入{Menu}；
从“盖茨比”导入{Link}
const useStyles=makeStyles（（主题）=>({
根目录：{
flexGrow:1，
背景色：“e8eaf6”，
颜色：“黑色”
},
菜单按钮：{
边缘光：主题。间距（2），
},
标题：{
flexGrow:1
},
}));
导出默认函数NavBar（）{
const classes=useStyles（）；
const[open，setOpen]=useState（false）
常量[anchorEl，setAnchorEl]=React.useState（null）；
常量handleClick=（e）=>{
setOpen（！open）
setancorel（document.querySelector（'header'））
}
常量handleMenuClose=（）=>{
setOpen（！open）
setAnchorEl（空）
}
返回(
内部命令
handleClick（e）}/>
1.
2.
3.
4.
);
}

我该怎么办？我应该创建自己的主题吗？或更改样式是否正常？

您可以使用来确定用于调整下拉菜单位置的参数

关于100%的宽度，我不确定你想要实现什么。下拉菜单的定位点是固定的，根据应用的样式，宽度将适应内容的大小。宽度为100%时，您可能希望使用一个而不是下拉菜单

import React, { useState } from 'react';
import { makeStyles } from '@material-ui/core/styles';
import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';
import Typography from '@material-ui/core/Typography';
import IconButton from '@material-ui/core/IconButton';
import MenuIcon from '@material-ui/icons/Menu';
import MenuItem from "@material-ui/core/MenuItem"
import { Menu } from '@material-ui/core';
import { Link } from "gatsby"

const useStyles = makeStyles((theme) => ({
  root: {
    flexGrow: 1,
    backgroundColor: "#e8eaf6",
    color: "black"
  },
  menuButton: {
    marginRight: theme.spacing(2),
  },
  title: {
    flexGrow: 1
  },
}));

export default function NavBar() {
  const classes = useStyles();
  const [open, setOpen] = useState(false)
  const [anchorEl, setAnchorEl] = React.useState(null);
  const handleClick = (e) =>{
    setOpen(!open)
    setAnchorEl(document.querySelector('header'))
  }
  const handleMenuClose = () => {
    setOpen(!open)
    setAnchorEl(null)
  }

  return (
    <AppBar position="static" className={classes.root}>
      <Toolbar>
        <Typography variant="h5" className={classes.title}>
          Inhouse Orders
        </Typography>
        <IconButton edge="false" className={classes.menuButton} color="inherit" aria-label="menu">
          <MenuIcon onClick={(e)=>handleClick(e)}/>
        </IconButton>
        <Menu
          className={classes.menu}
          open={open}
          onClose={handleMenuClose}
          getContentAnchorEl={null}
          anchorEl={anchorEl}
          anchorOrigin={{
            vertical: 'top',
            horizontal: 'left',
          }}
          transformOrigin={{
            vertical: 'bottom',
            horizontal: 'center',
          }}
          >
          <Link to="/1"><MenuItem>1</MenuItem></Link>
          <Link to="/2"><MenuItem>2</MenuItem></Link>
          <Link to="/3"><MenuItem>3</MenuItem></Link>
          <Link to="/4"><MenuItem>4</MenuItem></Link>
        </Menu>
      </Toolbar>
    </AppBar>
  );
}