Javascript 如何对齐材质UI菜单项？

我使用material ui的菜单和菜单项构建了一个选择下拉菜单，但我发现一件奇怪的事情：下拉菜单总是扩展到框的左侧，如下图所示：

我尝试在我的

中使用

alignItems

属性，但没有成功

我的代码如下所示。有人能帮我解决这个问题吗？我真的很感谢你的帮助

          <Menu
            id="order-menu"
            anchorEl={anchorEl}
            keepMounted
            open={Boolean(anchorEl)}
            onClose={() => setAnchorEl(null)}
          >
            {options.map((option, index) => (
              <MenuItem
                key={option}
                selected={index === selectedIndex}
                onClick={(event) => handleMenuItemClick(event, index)}
              >
                {option}
              </MenuItem>
            ))}
          </Menu>

setancorel（空）}
>
{options.map（（选项，索引）=>(
handleMenuItemClick（事件、索引）}
>
{option}
))}

控制此操作的默认样式位于它指定的

列表项中

您可以将其更改为右对齐：

const MenuItem = withStyles({
  root: {
    justifyContent: "flex-end"
  }
})(MuiMenuItem);

下面是一个完整的工作示例：

import React from "react";
import Button from "@material-ui/core/Button";
import Menu from "@material-ui/core/Menu";
import MuiMenuItem from "@material-ui/core/MenuItem";
import { withStyles } from "@material-ui/core/styles";

const MenuItem = withStyles({
  root: {
    justifyContent: "flex-end"
  }
})(MuiMenuItem);

export default function SimpleMenu() {
  const [anchorEl, setAnchorEl] = React.useState(null);

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

  const handleClose = () => {
    setAnchorEl(null);
  };

  return (
    <div>
      <Button
        aria-controls="simple-menu"
        aria-haspopup="true"
        onClick={handleClick}
      >
        Open Menu
      </Button>
      <Menu
        id="simple-menu"
        anchorEl={anchorEl}
        keepMounted
        open={Boolean(anchorEl)}
        onClose={handleClose}
      >
        <MenuItem onClick={handleClose}>1</MenuItem>
        <MenuItem onClick={handleClose}>2</MenuItem>
        <MenuItem onClick={handleClose}>3</MenuItem>
        <MenuItem onClick={handleClose}>10</MenuItem>
        <MenuItem onClick={handleClose}>20</MenuItem>
        <MenuItem onClick={handleClose}>300</MenuItem>
      </Menu>
    </div>
  );
}

从“React”导入React；
从“@物料界面/核心/按钮”导入按钮；
从“@material ui/core/Menu”导入菜单；
从“@material ui/core/MenuItem”导入MuiMenuItem；
从“@material ui/core/styles”导入{withStyles}”；
const MenuItem=带有样式({
根目录：{
辩护内容：“柔性端”
}
})（MuiMenuItem）；
导出默认函数simplemu（）{
常量[anchorEl，setAnchorEl]=React.useState（null）；
const handleClick=事件=>{
Setancorel（事件当前目标）；
};
常量handleClose=（）=>{
setAnchorEl（空）；
};
返回(
打开菜单
1.
2.
3.
10
20
300
);
}


相关文件：




您可以使用此代码对齐菜单

anchorOrigin={{
  vertical: 'bottom',
  horizontal: 'center',
}}
transformOrigin={{
  vertical: 'bottom',
  horizontal: 'center',
}}

范例

<Menu
 id="order-menu"
 anchorEl={anchorEl}
 keepMounted
 open={Boolean(anchorEl)}
 onClose={() => setAnchorEl(null)}
 anchorOrigin={{
   vertical: 'bottom',
   horizontal: 'center',
 }}
 transformOrigin={{
   vertical: 'bottom',
   horizontal: 'center',
 }}
 style={{top: 170}} // you can set top position so that it will show under the selection
>
 {options.map((option, index) => (
   <MenuItem
     key={option}
     selected={index === selectedIndex}
     onClick={(event) => handleMenuItemClick(event, index)}
   >
     {option}
   </MenuItem>
 ))}

setancorel（空）}
锚定素={{
垂直：“底部”，
水平：“中心”，
}}
变形金刚={{
垂直：“底部”，
水平：“中心”，
}}
style={{top:170}}//您可以设置top位置，使其显示在所选内容下
>
{options.map（（选项，索引）=>(
handleMenuItemClick（事件、索引）}
>
{option}
))}
我相信，借助MaterialUI核心样式化方法，您可以将所需样式应用于此处提到的MenuITem组件的
根
，谢谢您的帮助！知道了！谢谢你的帮助@云秀秋很高兴这有帮助！请记住解决你的问题。哦，我明白了！对不起，我不熟悉stackoverflow