材质UI ListItemSecondaryAction在ListItem

Question

使用Action创建ListIem时遇到了@ material-ui / core问题。当ListItemSecondaryAction文本变长时，我想将ListItemAvatar放在secondary的上方，有什么方法可以克服它：

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