反應材料ui在左側增長

Question

如何使上下文菜單不在按鈕的中心打開，而是在按鈕的左側？ 使用屬性材質 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組件應該有一個值bottom-start的placement屬性：

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

有關更多選項，請查看此處： https://material-ui.com/components/popper/#positioned-popper 。