如何让MUI Table单元格内容全可点击 消除单元格点击死区

问题根因 #

出现点击死区的核心原因是 <Link> 元素默认仅为行内块级，仅包裹内部内容区域，没有撑满整个 <TableCell> 单元格。而你在样式中给 MuiTableCell-root 设置了内边距，这部分内边距区域不属于Link的点击范围，就形成了无法触发跳转的死区。

解决方案1（推荐：基于Link样式改造，无需修改交互逻辑） #

1. 首先在useStyles中新增linkCell样式类，清除单元格默认内边距，让Link撑满整个单元格：

const useStyles = makeStyles(theme => ({
  // 保留原有其他样式，新增以下类
  linkCell: {
    padding: '0 !important',
    '& a': {
      width: '100%',
      height: '100%',
      display: 'inline-flex',
      alignItems: 'center',
      justifyContent: 'center',
      padding: '8px 5px', // 把原本单元格的内边距迁移到Link上，保持视觉效果不变
      textDecoration: 'none',
      color: 'inherit',
    }
  },
}));

2. 给需要跳转的单元格添加linkCell类，调整内部结构（可去掉冗余的Box包裹）：

{/* 第一个单元格调整 */}
<TableCell align="center" className={classes.linkCell}>
  <Link to={APP_DASHBOARD_CHILD_FOLDER_CONTENTS_PATH(id)}>
    <IconButton color="default" size={'medium'}>
      <FolderIcon fontSize="default" />
    </IconButton>
  </Link>
</TableCell>
{/* 名称、更新时间单元格调整 */}
{[name, new Date(updatedAt)].map(cell => (
  <TableCell key={`${id}-${cell}`} align="center" className={classes.linkCell}>
    <Link to={APP_DASHBOARD_CHILD_FOLDER_CONTENTS_PATH(id)}>
      {getCorrectFormat(cell)}
    </Link>
  </TableCell>
))}

提示：map的key不要用index，改为唯一值避免渲染异常。

解决方案2（更简洁：基于单元格点击事件跳转） #

如果不想修改Link样式，也可以直接给单元格绑定点击事件手动跳转，适配性更强：

1. 引入路由跳转钩子：

import { useNavigate } from 'react-router-dom';
// 组件内实例化
const navigate = useNavigate();

2. 给需要跳转的单元格添加点击事件：

<TableCell 
  align="center"
  onClick={() => navigate(APP_DASHBOARD_CHILD_FOLDER_CONTENTS_PATH(id))}
>
  <IconButton color="default" size={'medium'}>
    <FolderIcon fontSize="default" />
  </IconButton>
</TableCell>

提示：如果单元格内有其他独立可点击元素（比如操作按钮），需要给这些元素的点击事件加e.stopPropagation()，避免冒泡触发单元格的跳转事件。

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