Material UI如何为ImageListItemBar添加多个actionIcons

ImageListItemBar的actionIcon属性接收类型为React节点，没有限制只能传入单个IconButton。官方示例只演示单图标用法仅为基础功能展示，你只要把多个操作按钮用容器包裹后传给actionIcon就能实现多图标效果，不需要额外修改组件逻辑或者做二次封装。

具体实现方式 #

1. 引入需要的操作图标，如需调整多图标之间的间距、对齐方式，可以额外引入MUI的Box组件做布局容器：

// 以点赞、点踩两个图标为例
import ThumbUpIcon from '@mui/icons-material/ThumbUp';
import ThumbDownIcon from '@mui/icons-material/ThumbDown';
import Box from '@mui/material/Box';

2. 将原actionIcon属性中的单个按钮替换为包裹了多个按钮的容器，两种常用写法可选：

• 不需要调整布局样式时，直接用React空标签（Fragment）包裹即可，无需引入额外组件：

<ImageListItemBar
  sx={{
    background:
      'linear-gradient(to bottom, rgba(0,0,0,0.7) 0%, ' +
      'rgba(0,0,0,0.3) 70%, rgba(0,0,0,0) 100%)',
  }}
  title={item.title}
  position="top"
  actionIcon={
    <>
      <IconButton
        sx={{ color: 'white' }}
        aria-label={`点赞 ${item.title}`}
        onClick={() => {/* 点赞逻辑 */}}
      >
        <ThumbUpIcon />
      </IconButton>
      <IconButton
        sx={{ color: 'white' }}
        aria-label={`点踩 ${item.title}`}
        onClick={() => {/* 点踩逻辑 */}}
      >
        <ThumbDownIcon />
      </IconButton>
    </>
  }
  actionPosition="left"
/>

• 需要控制图标间距、对齐规则时，用Box组件通过flex布局快速调整样式：

actionIcon={
  <Box sx={{ display: 'flex', gap: 0.5, alignItems: 'center' }}>
    {/* gap值控制图标之间的间距，内部放多个IconButton即可 */}
    <IconButton sx={{ color: 'white' }} aria-label={`点赞 ${item.title}`}>
      <ThumbUpIcon />
    </IconButton>
    <IconButton sx={{ color: 'white' }} aria-label={`点踩 ${item.title}`}>
      <ThumbDownIcon />
    </IconButton>
  </Box>
}

渲染后多个图标会沿操作栏水平排列，交互、样式表现和单个图标完全一致。

官方单图标示例效果参考 #

图中顶部白色星形图标就是官方示例中单actionIcon的呈现效果。

附官方原始示例代码：

import * as React from 'react';
import ImageList from '@mui/material/ImageList';
import ImageListItem from '@mui/material/ImageListItem';
import ImageListItemBar from '@mui/material/ImageListItemBar';
import IconButton from '@mui/material/IconButton';
import StarBorderIcon from '@mui/icons-material/StarBorder';

function srcset(image, width, height, rows = 1, cols = 1) {
  return {
    src: `${image}?w=${width * cols}&h=${height * rows}&fit=crop&auto=format`,
    srcSet: `${image}?w=${width * cols}&h=${
      height * rows
    }&fit=crop&auto=format&dpr=2 2x`,
  };
}

export default function CustomImageList() {
  return (
    <ImageList
      sx={{
        width: 500,
        height: 450,
        transform: 'translateZ(0)',
      }}
      rowHeight={200}
      gap={1}
    >
      {itemData.map((item) => {
        const cols = item.featured ? 2 : 1;
        const rows = item.featured ? 2 : 1;

        return (
          <ImageListItem key={item.img} cols={cols} rows={rows}>
            <img
              {...srcset(item.img, 250, 200, rows, cols)}
              alt={item.title}
              loading="lazy"
            />
            <ImageListItemBar
              sx={{
                background:
                  'linear-gradient(to bottom, rgba(0,0,0,0.7) 0%, ' +
                  'rgba(0,0,0,0.3) 70%, rgba(0,0,0,0) 100%)',
              }}
              title={item.title}
              position="top"
              actionIcon={
                <IconButton
                  sx={{ color: 'white' }}
                  aria-label={`star ${item.title}`}
                >
                  <StarBorderIcon />
                </IconButton>
              }
              actionPosition="left"
            />
          </ImageListItem>
        );
      })}
    </ImageList>
  );
}

const itemData = [
  {
    img: 'https://images.unsplash.com/photo-1551963831-b3b1ca40c98e',
    title: 'Breakfast',
    author: '@bkristastucchio',
    featured: true,
  },
  {
    img: 'https://images.unsplash.com/photo-1551782450-a2132b4ba21d',
    title: 'Burger',
    author: '@rollelflex_graphy726',
  },
  {
    img: 'https://images.unsplash.com/photo-1522770179533-24471fcdba45',
    title: 'Camera',
    author: '@helloimnik',
  },
  {
    img: 'https://images.unsplash.com/photo-1444418776041-9c7e33cc5a9c',
    title: 'Coffee',
    author: '@nolanissac',
  },
  {
    img: 'https://images.unsplash.com/photo-1533827432537-70133748f5c8',
    title: 'Hats',
    author: '@hjrc33',
  },
  {
    img: 'https://images.unsplash.com/photo-1558642452-9d2a7deb7f62',
    title: 'Honey',
    author: '@arwinneil',
    featured: true,
  },
  {
    img: 'https://images.unsplash.com/photo-1516802273409-68526ee1bdd6',
    title: 'Basketball',
    author: '@tjdragotta',
  },
  {
    img: 'https://images.unsplash.com/photo-1518756131217-31eb79b20e8f',
    title: 'Fern',
    author: '@katie_wasserman',
  },
  {
    img: 'https://images.unsplash.com/photo-1597645587822-e99fa5d45d25',
    title: 'Mushrooms',
    author: '@silverdalex',
  },
  {
    img: 'https://images.unsplash.com/photo-1567306301408-9b74779a11af',
    title: 'Tomato basil',
    author: '@shelleypauls',
  },
  {
    img: 'https://images.unsplash.com/photo-1471357674240-e1a485acb3e1',
    title: 'Sea star',
    author: '@peterlaster',
  },
  {
    img: 'https://images.unsplash.com/photo-1589118949245-7d38baf380d6',
    title: 'Bike',
    author: '@southside_customs',
  },
];

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