【问题标题】：Material UI ListItemSecondaryAction vertically align in ListItem材质 UI ListItemSecondaryAction 在 ListItem 中垂直对齐
【发布时间】：2020-07-23 05:43:10
【问题描述】：

我在使用 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

【问题讨论】：

标签： reactjs typescript material-ui

【解决方案1】：

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

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

【讨论】：