Material UI ItemList 试图让 Icon 更接近元素

Question

我试图让这个 - 图标更接近文本，但我不确定如何。

当我进入开发者模式时，它会向我显示这一点。

我不知道紫色的东西是什么意思。我的最终目标是尝试将图标移动到“Steve First”框所在的右上角，但我不知道该怎么做。这是我正在构建列表的代码。

<List style={{ display: "flex", flexDirection: "row", padding: 0 }}>
  <ListItem
    className={classes.removePerson}
    secondaryAction={
      <IconButton
        sx={{
          zIndex: "1",
          width: "15px !important",
          height: "15px !important"
        }}
      >
        <RemoveCircleIcon sx={{ fontSize: "20px" }} />
      </IconButton>
    }
  >
    <ListItemAvatar>
      <Avatar src="stuff.img" />
    </ListItemAvatar>
    <ListItemText
      className={classes.peopleListSpacing}
      primary="Steve First Steve First Steve First"
    />
  </ListItem>
  <ListItem
    className={classes.removePerson}
    secondaryAction={
      <IconButton
        sx={{
          zIndex: "1",
          width: "15px !important",
          height: "15px !important"
        }}
      >
        <RemoveCircleIcon sx={{ fontSize: "20px" }} />
      </IconButton>
    }
  >
    <ListItemAvatar>
      <Avatar src="stuff.img" />
    </ListItemAvatar>
    <ListItemText className={classes.peopleListSpacing} primary="Steve First" />
  </ListItem>
</List>

代码显示这个。

Answer 1

紫色空间是未使用的可用空间。

让您的 ListItemAvatar 成为一个弹性容器并使其居中怎么样？您可能想将其右对齐，然后添加一些右边距。

在您的类对象中创建一个新的 listItemAvatar 属性。

display: flex;
justify-content: center;

<ListItemAvatar className={classes.listItemAvatar}>
  <Avatar src="..." />
</ListItemAvatar>