reactjs - Material UI ListItemSecondaryAction 在 ListItem 中垂直对齐

Question

我在使用 Action 创建 ListIem 时遇到了@material-ui/core 问题。当 secondary 文本变长时，我想将 ListItemSecondaryAction 保持在顶部作为 ListItemAvatar，有什么办法可以克服它:

<ListItem alignItems="flex-start">
        <ListItemAvatar>
          <Avatar alt="Remy Sharp" src="/static/images/avatar/1.jpg" />
        </ListItemAvatar>
        <ListItemText
          primary="Brunch this weekend?"
          secondary={
            <React.Fragment>
              <Typography
                component="span"
                variant="body2"
                className={classes.inline}
                color="textPrimary"
              >
                Ali Connors
              </Typography>
              {
                " — I'll be in your neighborhood doing errands this…I'll be in your neighborhood doing errands this…I'll be in your neighborhood doing errands this…"
              }
            </React.Fragment>
          }
        />
        <ListItemSecondaryAction>
          <IconButton edge="end" aria-label="delete">
            <DeleteIcon />
          </IconButton>
        </ListItemSecondaryAction>
      </ListItem>

正如您在此处看到的那样，当文本变长时，delete 图标会被破坏，因此我希望垂直对齐使其与 ListItemAvatar 保持一致。任何帮助将不胜感激，谢谢!

CodeSandBox to play around

Answer 1

添加此样式将解决您的问题:

    <ListItemSecondaryAction style={{top:"0%", marginTop:"35px"}}>