反应材料ui在左侧增长答案

【问题标题】：react material ui grow on left side反应材料ui在左侧增长
【发布时间】：2020-12-02 16:29:57
【问题描述】：

如何使上下文菜单不在按钮的中心打开，而是在按钮的左侧？使用属性 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>

【问题讨论】：

其实并不清楚你想要什么。请在问题中添加更多信息，以及您尝试实现的目标，并在最后删除离题的内容。
@BasvanderLinden，真的，对不起，昨天深夜才发了一个帖子，很累。重新修改了帖子，现在尽可能清楚我需要什么。

标签： reactjs material-ui

【解决方案1】：

您的Popper 组件应该有一个placement 属性值为bottom-start：

// ...
<Popper
  placement="bottom-start"
  // ...
>
// ...

更多选项请看这里：https://material-ui.com/components/popper/#positioned-popper。

【讨论】：