反应物料ui在左侧生长

Question

如何使上下文菜单不在按钮的中心而是在按钮的左侧打开？通过使用属性Material UI。

工作示例来自链接： https://codesandbox.io/s/2f33z

现在，这个：

我想要这个：

以下是文档中示例的链接： https://material-ui.com/components/menus/#menulist-composition

  <div>
    <Button
      ref={anchorRef}
      aria-controls={open ? 'menu-list-grow' : undefined}
      aria-haspopup="true"
      onClick={handleToggle}
    >
      Toggle Menu Grow
    </Button>
    <Popper open={open} anchorEl={anchorRef.current} role={undefined} transition disablePortal>
      {({ TransitionProps, placement }) => (
        <Grow
          {...TransitionProps}
          style={{ transformOrigin: placement === 'bottom' ? 'center top' : 'center bottom' }}
        >
          <Paper>
            <ClickAwayListener onClickAway={handleClose}>
              <MenuList autoFocusItem={open} id="menu-list-grow" onKeyDown={handleListKeyDown}>
                <MenuItem onClick={handleClose}>Profile</MenuItem>
                <MenuItem onClick={handleClose}>My account</MenuItem>
                <MenuItem onClick={handleClose}>Logout</MenuItem>
              </MenuList>
            </ClickAwayListener>
          </Paper>
        </Grow>
      )}
    </Popper>
  </div>

Answer 1

您的Popper组件应具有值为placement的{​​{1}}属性：

bottom-start

有关更多选项，请点击此处：https://material-ui.com/components/popper/#positioned-popper。