如何为MaterialUI ImageList中选中的图片添加边框？

你可以通过条件式sx样式给选中的ImageListItem添加边框，结合已有的useState状态判断当前选中项，具体修改如下：

修改后的完整代码 #

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

export const ImageGrid = () => {
    const [selectedImage, setSelectedImage] = useState("");
    const handleClick = (id: string) => {
        setSelectedImage(id);
      };
  return (
    <div>
        <div>Image Grid</div>
        <ImageList sx={{ width: 500, height: 480 }} cols={3} rowHeight={164} gap={10}>
        {itemData.map((item) => (
            <ImageListItem 
                key={item.img}
                // 条件设置选中样式：选中时显示蓝色边框，未选中时无框
                sx={{
                    border: selectedImage === item.title ? '2px solid #1976d2' : 'none',
                    borderRadius: 1, // 可选：给边框加圆角
                    overflow: 'hidden', // 确保图片不超出边框范围
                    cursor: 'pointer' // 可选：鼠标悬停显示手型
                }}
                onClick={() => handleClick(item.title)}
            >
            <img
                src={item.img}
                srcSet={item.img}
                alt={item.title}
                loading="lazy"
                style={{ width: '100%', height: '100%', objectFit: 'cover' }} // 让图片填满容器
            />
            </ImageListItem>
        ))}
        </ImageList>
    </div>
  )
}

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

关键修改说明 #

• 条件边框样式：在ImageListItem的sx属性中，通过selectedImage === item.title判断是否为选中项，动态添加蓝色边框（可根据需求修改颜色）。
• 图片适配：给<img>添加width: 100%、height: 100%和objectFit: 'cover'，确保图片填满ImageListItem容器，不会出现拉伸或留白。
• 交互优化：添加cursor: 'pointer'让用户知道图片可点击，overflow: 'hidden'避免图片超出边框范围。
• 点击事件迁移：把点击事件从<img>移到ImageListItem上，扩大可点击区域，提升用户体验。

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