如何在Material UI的ImageListItemBar中为IconButton添加间距或均匀排布？

以下是几种实用的实现方式，直接基于你的代码修改即可：

方法1：用Box组件设置统一间距（推荐） #

Material UI的Box组件支持gap属性，能快速给子元素添加统一间距，替换原来的空标签<>即可：

<ImageListItem
  key={item?.id}
  cols={item.cols || 1}
  rows={item.rows || 1}
>
  <img
    {...srcSetStyle(item.url, 121, item.rows, item.cols)}
    alt={item.url}
    loading="lazy"
  />
  <ImageListItemBar
    sx={{
      background: "transparent",
      top: "5%",
    }}
    position="top"
    actionPosition="left"
    actionIcon={
      <Box sx={{ gap: 2 }}> {/* 这里设置间距，数值对应主题的spacing单位 */}
        <IconButton
          sx={{ color: "red" }}
        >
          {item.isFavorite ? (
            <FavoriteIcon className="favoriteIcon" />
          ) : (
            <FavoriteBorderIcon
              className="favoriteIcon"
            />
          )}
        </IconButton>

        <IconButton
          className="addIcon"
          sx={{
            color: "red",
          }}
        >
          <AddCircleOutlineIcon />
        </IconButton>
      </Box>
    }
  />
</ImageListItem>

gap: 2对应Material UI主题中spacing(2)的距离，你可以根据需求调整数值（比如1、3等）。

方法2：给单个按钮添加左侧间距 #

如果只需要给第二个按钮单独加左侧间距，直接在它的sx属性里添加marginLeft：

<IconButton
  className="addIcon"
  sx={{
    color: "red",
    ml: 2, // 等价于marginLeft: theme.spacing(2)
  }}
>
  <AddCircleOutlineIcon />
</IconButton>

方法3：实现按钮均匀分布 #

如果希望两个按钮在可用空间内均匀分布（比如占满左侧栏宽度），可以用Flex布局控制：

<ImageListItemBar
  sx={{
    background: "transparent",
    top: "5%",
  }}
  position="top"
  actionPosition="left"
  actionIcon={
    <Box sx={{ display: 'flex', justifyContent: 'space-between', width: '150px' }}>
      <IconButton sx={{ color: "red" }}>
        {item.isFavorite ? (
          <FavoriteIcon className="favoriteIcon" />
        ) : (
          <FavoriteBorderIcon className="favoriteIcon" />
        )}
      </IconButton>
      <IconButton className="addIcon" sx={{ color: "red" }}>
        <AddCircleOutlineIcon />
      </IconButton>
    </Box>
  }
/>

通过justifyContent: 'space-between'让按钮两端对齐，width设置容器宽度来控制分布范围，也可以用space-around让按钮两侧间距相等。

内容的提问来源于stack exchange，提问作者MKapp