如何通过点击外部组件图标控制Material UI Accordion展开/折叠

核心逻辑是把展开状态改成按行独立受控，同时禁用Accordion默认的整区域点击触发，只给目标图标绑定切换逻辑即可。

• 首先替换原有的单布尔值展开状态，用行唯一ID做键维护展开映射，避免单开/全展开的异常问题：

import { useState } from 'react';
// 初始化展开状态
const [expandedRowMap, setExpandedRowMap] = useState({});

// 单条行展开切换方法
const toggleRowExpand = (rowId) => {
  setExpandedRowMap(prev => ({
    ...prev,
    [rowId]: !prev[rowId]
  }));
};

• 调整Accordion组件配置，关闭默认点击触发逻辑，移除默认展开箭头，绑定受控展开状态：

<Accordion
  expanded={Boolean(expandedRowMap[row.id])}
  onChange={() => {}} // 空函数拦截默认的点击整行切换逻辑
  sx={{ boxShadow: 'none', width: '100%' }}
>
  <AccordionSummary
    expandIcon={null}
    sx={{
      padding: 0,
      minHeight: 'unset !important',
      '& .MuiAccordionSummary-content': { margin: 0 }
    }}
  >
    {/* 原email单元格常规内容 */}
    <TableCell component="div">{row.email}</TableCell>
  </AccordionSummary>
  <AccordionDetails sx={{ padding: 0 }}>
    {/* 展开区域，colSpan设置为表格总列数，避免布局错位 */}
    <TableCell component="div" colSpan={TABLE_COLUMN_COUNT}>
      {/* 这里写你要展开显示的对应行详情内容 */}
    </TableCell>
  </AccordionDetails>
</Accordion>

• 给消息图标列绑定点击触发事件，注意阻止事件冒泡避免干扰表格其他交互：

<TableCell>
  <IconButton
    onClick={(e) => {
      e.stopPropagation();
      toggleRowExpand(row.id);
    }}
  >
    <MessageIcon />
  </IconButton>
</TableCell>

补充：如果需要实现「同一时间仅展开一行」的效果，修改切换方法即可：点击时先将所有行的展开状态置为false，再切换当前点击行的状态。
注意Accordion嵌套在TableCell里时，建议给Accordion内的TableCell/AccordionSummary/AccordionDetails加上component="div"属性，避免td嵌套div的DOM结构警告。

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