本文介绍如何在 material ui 的 imagelist 组件中实现图片点击选中高亮效果，通过 usestate 管理选中状态，并结合 style 动态绑定边框样式，确保交互清晰、代码简洁且符合 mui 最佳实践。
在使用 Material UI 构建图片网格时，为提升用户交互体验，常需对当前选中的图片施加视觉反馈（如添加边框）。Material UI 官方推荐将动态样式（依赖 React 状态变化）放在 style prop 中，而静态样式（如固定尺寸、间距）则统一使用 sx 属性管理——这不仅提升可读性，也避免 sx 在频繁重渲染时的性能开销。
以下是完整可运行的实现方案：
import React, { useState } from 'react';
import { ImageList, ImageListItem, Box } from '@mui/material';
export const ImageGrid = () => {
const [selectedImage, setSelectedImage] = useState<string | null>(null);
const handleClick = (title: string) => {
setSelectedImage(title);
};
return (
<div>
<Box mb={2} fontWeight="bold">Image Grid</Box>
<ImageList sx={{ width: 500, height: 480 }} cols={3} rowHeight={164} gap={10}>
{itemData.map((item) => (
<ImageListItem
key={item.img}
style={{
border: selectedImage === item.title ? '3px solid #1976d2' : 'none',
borderRadius: '4px',
transition: 'border 0.2s ease',
}}
>
@@##@@ handleClick(item.title)}
style={{
display: 'block',
width: '100%',
height: 'auto',
borderRadius: '4px',
}}
/>
</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',
},
// ... 其余 10 项保持不变（略）
{
img: 'https://images.unsplash.com/photo-1589118949245-7d38baf380d6',
title: 'Bike',
},
];✅ 关键要点说明：
- 使用 useState
初始化为 null，避免空字符串误判； - style 直接内联绑定条件样式，语义清晰且响应及时；
- 添加 borderRadius 和 transition 提升视觉平滑度；
-
标签自身也设置 borderRadius，确保边框与图片圆角一致；
- 不建议在 sx 中写条件逻辑（如 sx={{ border: selectedImage === x ? '...' : 'none' }}），因其会触发 MUI 主题系统深度计算，影响性能。
? 进阶提示： 若需支持多选，可将 selectedImage 改为 string[] 类型，配合 includes() 判断，并使用 borderColor="primary.main" 等主题色变量增强一致性。
通过上述方式，你即可在 Material UI 项目中快速、规范地实现图片选中高亮功能，兼顾可维护性与用户体验。
