使整个单元格内容可点击 MUI 表格

我有一个 MUI 表格，其中的单元格在单击时链接到应用程序的另一部分。我不是包裹整行，而是有选择地包裹某些单元格。链接/路由正在工作 - 但由于一些样式交互，我留下了这个令人讨厌的死的不可点击的空间。

在下图中，我打开了开发工具上的“检查元素”视图，以专门显示我在第一个单元格中处理的死区，并显示一些可能相关的 mui 样式细节。带有样式的代码进一步包含在下面。

Styles:

const useStyles = makeStyles(theme => ({
  table: {
    minWidth: 650,
    position: 'relative',
    fontSize: 10
  },
  largeIcon: {
    width: 60,
    height: 60
  },
  tableContainer: {
    minHeight: 320
  },
  tableBodyContainer: {
    minHeight: 265
  },
  tableHeadRow: {
    '& .MuiTableCell-root': {
      borderRight: `1px solid ${COLORS.WHITE}`,
      borderBottom: `none`,
      padding: '8px 5px 8px',
      fontSize: 10,
      cursor: 'pointer'
    }
  },
  arrow: {
    color: theme.palette.grey[500]
  },
  arrowActive: {
    transform: 'rotate(-180deg)',
    color: theme.palette.primary.main,
    display: 'inline-block'
  },
  tableRow: {
    '& .MuiTableCell-root': {
      borderRight: `1px solid ${theme.palette.grey[200]}`,
      borderBottom: 'none',
      cursor: 'pointer',
      padding: 5,
      paddingTop: 8,
      paddingBottom: 8,
      minWidth: 25
    },
    '& .MuiTableCell-root:first-child': {
      border: 'none'
    }
  },
  selectedRow: {
    backgroundColor: `${COLORS.SECONDARY} !important`,
    '& .MuiTableCell-root': {
      color: COLORS.WHITE
    }
  },
  editIcon: {
    backgroundImage: `url(${EditIcon})`,
    backgroundSize: 'cover',
    backgroundPosition: 'center',
    width: 18,
    height: 18
  }
}));

还有表格：

 return (
    <div className={classes.tableContainer}>
      <TableContainer className={classes.tableBodyContainer}>
        <Table className={classes.table} size="small">
          <TableHead>
            <TableRow className={classes.tableHeadRow}>
              <TableCell />
              {tableHeadElements.map(e => (
                <TableCell key={e.key} align="center">
                  {e.label}
                </TableCell>
              ))}
            </TableRow>
          </TableHead>
          <TableBody>
            {folders?.items.map((folder: IFolderDTO, index: number) => {
              const { id, name, updatedAt } = folder;
              return (
                <TableRow
                  className={classes.tableRow}
                  classes={{ selected: classes.selectedRow }}
                  selected={selectedRow === id}
                  onClick={() => setSelectedRow(id)}
                  key={index}
                >
                  <TableCell align="center" >
                    <Link to={APP_DASHBOARD_CHILD_FOLDER_CONTENTS_PATH(id)}>
                      <Box>
                        <IconButton color="default" size={'medium'}>
                          <FolderIcon fontSize="default" />
                        </IconButton>
                      </Box>
                    </Link>
                  </TableCell>
                  {[name, new Date(updatedAt)].map(cell => (
                    <TableCell key={index} align="center">
                      <Link to={APP_DASHBOARD_CHILD_FOLDER_CONTENTS_PATH(id)}>
                        <Box>{getCorrectFormat(cell)}</Box>
                      </Link>
                    </TableCell>
                  ))}
                  <FolderActionsMenu
                    folderId={id}
                    onDeleteFolder={onDeleteFolder}
                    openDialogWithId={openDialogWithId}
                  />
                </TableRow>
              );
            })}
          </TableBody>
        </Table>
      </TableContainer>
      <FolderFormDialog />
    </div>

杀死死的不可点击的空间！ （请）

Thanks