如何在左侧而不是右侧打开 Material UI Menu 组件？

Question

所以我用 Material UI 的 Menu 组件制作了一个下拉组件，但默认情况下，菜单组件在右侧打开。我需要它真正向左打开。

我已经尝试过设计它，我最终可以让它随边距移动，但我正在寻找更可靠的东西。老实说，我很惊讶没有任何支持。

currently, my dropdown menu opens like this - not good

我希望它从那里开始，只是打开另一个方向。任何帮助表示赞赏！

我的代码如下： 组件

function DropDown({
  dropDownMeta,
  style = { container: {}, icon: {} },
  icon = <MenuIcon style={{ ...style.icon }} />
}: DropDownProps): ReactElement {
  const [menuAnchor, setMenuAnchor] = useState<null | HTMLElement>(null)

  const handleMenuClick = (event: React.MouseEvent<HTMLButtonElement>) => {
    setMenuAnchor(event.currentTarget)
  }

  const handleMenuClose = () => {
    setMenuAnchor(null)
  }
  const classes = useStyles()
  return (
    <Box style={{ ...style.container }}>
      <StyledIconButton
        style={{ ...style.buttonContainer }}
        onClick={handleMenuClick}
      >
        {icon}
      </StyledIconButton>
      <Menu
        anchorEl={menuAnchor}
        keepMounted
        open={Boolean(menuAnchor)}
        onClose={handleMenuClose}
        className={classes.root}
        style={menuStyles as CSSProperties}
        // getContentAnchorEl={null}
        anchorOrigin={{
          vertical: "top",
          horizontal: "left",
        }}
      >
        {dropDownMeta.map((item, i) => {
          const { label, callback, bottomDivider } = item
          return (
            <Box key={`Item${i}`} onClick={handleMenuClose}>
              <StyledMenuItem onClick={callback}>{label}</StyledMenuItem>
              {bottomDivider && <Divider />}
            </Box>
          )
        })}
      </Menu>
    </Box>
  )
}

export default DropDown

样式

dropDown: {
    menu: {
      position: "absolute",
      top: 35
    },
    menuItem: {
      fontSize: 12,
      padding: 5,
      minWidth: 250
    },
    menuIconBtn: {
      fontSize: 31,
      position: "relative",
      top: 1,
      padding: 0
    }
  },

Answer 1

您需要将属性transformOrigin 添加并配置到Menu 组件。这未在 Menu API 文档中显示，但您可以在 Popover API 文档中阅读。

Popover API 对transformOrigin 的描述是

这是弹出框的 anchorEl 将附加到的锚点上的点。当anchorReference 为“anchorPosition”时不使用。 选项：垂直：[顶部、中心、底部]；水平：[左、中、右]。

这个例子只是Material-UI's customized menus demo的简化版。

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

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

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

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

  return (
    <div style={{ padding: 200 }}>
      <Button variant="contained" onClick={handleClick}>
        Open Menu
      </Button>
      <Menu
        anchorEl={anchorEl}
        keepMounted
        open={!!anchorEl}
        onClose={handleClose}
        getContentAnchorEl={null}
        anchorOrigin={{
          vertical: "bottom",
          horizontal: "center",
        }}
        transformOrigin={{
          vertical: "top",
          horizontal: "right",
        }}
      >
        <MenuItem style={{ backgroundColor: "pink" }}>
          Long bit of text so we can see left/right...
        </MenuItem>
      </Menu>
    </div>
  );
}