时间戳

首页 > 解决方案 > 材质 UI ListItemSecondaryAction 在 ListItem 中垂直对齐

reactjs - 材质 UI ListItemSecondaryAction 在 ListItem 中垂直对齐

问题描述

我在使用 Action 创建 ListIem 时遇到了@material-ui/core 问题。当文本变长时，我想保持ListItemSecondaryAction领先，有什么办法可以克服它：ListItemAvatarsecondary

<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…&quot;
              }
            </React.Fragment>
          }
        />
        <ListItemSecondaryAction>
          <IconButton edge="end" aria-label="delete">
            <DeleteIcon />
          </IconButton>
        </ListItemSecondaryAction>
      </ListItem>

在此处输入图像描述

正如您在此处看到的，delete当文本变长时，图标会损坏，所以我希望垂直对齐保持它像ListItemAvatar. 任何帮助将不胜感激，谢谢！

CodeSandBox 玩

标签： reactjstypescriptmaterial-ui

解决方案

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

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

推荐阅读