Как открыть компонент Material UI Menu слева, а не справа?

Question

Итак, я сделал выпадающий компонент с компонентом Menu UI материала, но по умолчанию компонент меню открывается справа. Мне нужно, чтобы он действительно открывался влево.

Я пробовал стилизовать его, и в итоге я могу заставить его двигаться с полями, но я ищу что-то более надежное. Честно говоря, я удивлен, что для этого нет поддержки.

в настоящее время мое раскрывающееся меню открывается так - не очень хорошо

Я хочу, чтобы это началось там, просто откройте другое направление. Любая помощь приветствуется!

Мой код ниже: Компонент

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 в компонент «Меню». Это не показано в документации API меню, но вы можете прочитать об этом в документации Popover API .

Описание transformOrigin из Popover API:

Это точка привязки, к которой будет прикрепляться anchorEl всплывающего окна. Это не используется, если anchorReference - это anchorPosition. Варианты: по вертикали: [вверху, по центру, внизу]; по горизонтали: [слева, по центру, справа].

Этот пример является упрощением демонстрации настраиваемых меню Material-UI .

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

изображение элемента меню, по которому щелкнули мышью, и отображающий текст заполнителя