Блог

Я пытаюсь выровнять по левому краю выпадающий список меню, какие бы значения я ни вводил, они не дают такого результата, может кто-нибудь посоветовать, как это сделать?
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 amp;amp;
                      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>
  

Попробуйте это:

 <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>