反应材质UI拆分按钮对齐

Question

我试图将下拉菜单列表的左侧对齐，无论输入的值没有产生此结果，都可以建议如何操作？
https://material-ui.com/components/button-group/#split-button

这是我的模板的样子：

 <Grid container direction="column" alignItems="flex-start">
      <Grid item xs={12}>
        <ButtonGroup variant="contained" color="primary" ref={anchorRef} aria-label="split button">
          <Button onClick={() => handleClick(options[selectedIndex])}>
            {options[selectedIndex]}
          </Button>
          <Button
            color="primary"
            size="small"
            aria-controls={open ? "split-button-menu" : undefined}
            aria-expanded={open ? "true" : undefined}
            aria-label="select mode type"
            aria-haspopup="menu"
            onClick={handleToggle}
          >
            <ArrowDropDownIcon />
          </Button>
        </ButtonGroup>
        <Popper open={open} anchorEl={anchorRef.current} role={undefined} transition disablePortal>
          {({ TransitionProps, placement }) => (
            <Grow
              {...TransitionProps}
              style={{
                transformOrigin: placement === "bottom" ? "left top" : "left bottom",
              }}
            >
              <Paper>
                <ClickAwayListener onClickAway={handleClose}>
                  <MenuList id="split-button-menu">
                    {options &&
                      options.map((option, index) => (
                        <MenuItem
                          key={option}
                          disabled={index === selectedIndex}
                          selected={index === selectedIndex}
                          onClick={(event) => handleMenuItemClick(event, index)}
                        >
                          {option}
                        </MenuItem>
                      ))}
                  </MenuList>
                </ClickAwayListener>
              </Paper>
            </Grow>
          )}
        </Popper>
      </Grid>
    </Grid>

Answer 1

尝试一下：

<Grow
  {...TransitionProps}
  anchorOrigin={{
    horizontal: 'left',
    vertical: 'bottom',
  }}
  transformOrigin={{
    horizontal: 'left',
    vertical: 'top',
  }}
>
  {insert children here}
</Grow>

更新

这就是您想要的，即，将placement='bottom-start'添加到您的Popper组件中。感谢您给我更多背景信息。

<Popper
  open={open}
  anchorEl={anchorRef.current}
  role={undefined}
  transition
  disablePortal
  placement='bottom-start'
>
    {...children...}
</Popper>