如何在Material UI v5.11.11的ImageList中添加悬停与点击效果

要实现悬停高亮和点击效果，你可以通过Material UI的内联样式（sx）结合React状态来搞定，下面是具体修改方案：

一、添加鼠标悬停高亮效果 #

直接给ImageListItem添加悬停状态的样式，比如缩放、阴影或者边框，让图片在鼠标移上去时更显眼。同时可以给图片本身加上提亮效果，增强视觉反馈：

<ImageListItem
  key={index}
  sx={{
    cursor: 'pointer', // 鼠标变手型，提示可点击
    transition: 'all 0.3s ease', // 过渡动画让效果更丝滑
    overflow: 'hidden', // 防止缩放时图片溢出容器
    '&:hover': {
      transform: 'scale(1.05)', // 鼠标悬停时轻微放大
      boxShadow: '0 4px 20px rgba(0,0,0,0.15)', // 添加柔和阴影
      borderRadius: '8px', // 圆角优化视觉体验
    },
    '&:hover img': {
      filter: 'brightness(1.1)', // 悬停时图片提亮
    }
  }}
>
  <img
    src={"data:image/jpeg;base64," + item.content}
    alt={item.fileName}
    style={{
      width: '100%',
      height: '100%',
      objectFit: 'cover',
      transition: 'filter 0.3s ease',
    }}
  />
</ImageListItem>

二、实现鼠标点击选中效果 #

用React的useState记录当前选中的图片索引，给选中的项添加特殊样式，区分未选中状态：

1. 先在组件顶部导入useState：

import { useState } from 'react';

2. 初始化选中状态：

const [selectedIndex, setSelectedIndex] = useState(-1); // 默认无选中项

3. 修改ImageListItem，添加点击事件和选中样式：

<ImageListItem
  key={index}
  onClick={() => setSelectedIndex(selectedIndex === index ? -1 : index)} // 点击切换选中/取消
  sx={{
    cursor: 'pointer',
    transition: 'all 0.3s ease',
    overflow: 'hidden',
    '&:hover': {
      transform: 'scale(1.05)',
      boxShadow: '0 4px 20px rgba(0,0,0,0.15)',
      borderRadius: '8px',
    },
    '&:hover img': {
      filter: 'brightness(1.1)',
    },
    // 选中时的专属样式
    ...(selectedIndex === index && {
      border: '3px solid #1976d2', // 用Material UI默认主色做边框
      transform: 'scale(1.05)',
      boxShadow: '0 6px 25px rgba(25,118,210,0.3)',
      borderRadius: '8px',
    })
  }}
>
  {/* img标签同上 */}
</ImageListItem>

完整修改后的代码 #

整合所有改动后的完整代码如下：

import { useState } from 'react';
import { Box, ImageList, ImageListItem, imageListItemClasses } from '@mui/material';

const ImageGallery = ({ cardsList }) => {
  const [selectedIndex, setSelectedIndex] = useState(-1);

  return (
    <Box
      sx={{
        height: 450,
        marginLeft: "10em",
        backgroundColor: "white",
        display: "grid",
        gridTemplateColumns: {
          mobile: "repeat(1, 1fr)",
          bigMobile: "repeat(2, 1fr)",
          tablet: "repeat(3, 1fr)",
          desktop: "repeat(4, 1fr)",
        },
        [`& .${imageListItemClasses.root}`]: {
          display: "flex",
          flexDirection: "column",
        }
      }}
    >
      <ImageList
        variant="quilted"
        sx={{ width: 2000, height: 1000, margin: "5em" }}
        cols={3}
        rowHeight={500}
      >
        {cardsList.map((item, index) => (
          <ImageListItem
            key={index}
            onClick={() => setSelectedIndex(selectedIndex === index ? -1 : index)}
            sx={{
              cursor: 'pointer',
              transition: 'all 0.3s ease',
              overflow: 'hidden',
              '&:hover': {
                transform: 'scale(1.05)',
                boxShadow: '0 4px 20px rgba(0,0,0,0.15)',
                borderRadius: '8px',
              },
              '&:hover img': {
                filter: 'brightness(1.1)',
              },
              ...(selectedIndex === index && {
                border: '3px solid #1976d2',
                transform: 'scale(1.05)',
                boxShadow: '0 6px 25px rgba(25,118,210,0.3)',
                borderRadius: '8px',
              })
            }}
          >
            <img
              src={"data:image/jpeg;base64," + item.content}
              alt={item.fileName}
              style={{
                width: '100%',
                height: '100%',
                objectFit: 'cover',
                transition: 'filter 0.3s ease',
              }}
            />
          </ImageListItem>
        ))}
      </ImageList>
    </Box>
  );
};

export default ImageGallery;

额外说明 #

• 去掉了原代码中多余的外层div，减少不必要的DOM层级
• 点击事件做了切换逻辑：点击已选中的图片会取消选中
• 所有样式的颜色、缩放比例、阴影参数都可以根据你的需求自定义调整

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