无法完全覆盖 MUI TableCell 中的顶部和底部填充以使整个单元格内容可点击

Question

我试图让我的表格单元格的全部内容都可以点击（用于路由到我应用程序中的其他地方；路由工作正常）。

我通过在我的 padding: 0 样式覆盖中明确声明

tableRow

成功地删除了行之间不可点击的

horizontal

空间（这看起来已经过分了）。

如果直接访问和覆盖child样式，例如使用

'& .MuiTableCell-root:first-child'

，我已经成功地删除了

所有不可点击的空间

但是当我不直接访问孩子时，某些单元格的顶部和底部仍然有无法点击的空间。

为什么？

我已经尝试检查元素以缩小根本原因；看来我已经很接近了，只需要添加一些

"& .MuiTableCell-sizeSmall"

特定的样式即可。但是，即使我使用

padding: 0

在

tableRow

中设置

"& .MuiTableCell-sizeSmall"

也没有效果，并且行之间的垂直空间仍然无法点击。

//Styling

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',
      minWidth: 25,
      padding: 0
    },
    '& .MuiTableCell-root:first-child': {
      border: 'none',
      padding: 0
    },
    '& .MuiTableCell-sizeSmall': {
      padding: 0
    }
  },
  selectedRow: {
    backgroundColor: `${COLORS.SECONDARY} !important`,
    '& .MuiTableCell-root': {
      color: COLORS.WHITE
    }
  }
}));

---

// table code

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>
  );
};

Answer 1

您可能需要使用一个没有多余装饰的密集桌子的简单示例吗？

    import * as React from 'react';
import Table from '@mui/material/Table';
import TableBody from '@mui/material/TableBody';
import TableCell from '@mui/material/TableCell';
import TableContainer from '@mui/material/TableContainer';
import TableHead from '@mui/material/TableHead';
import TableRow from '@mui/material/TableRow';
import Paper from '@mui/material/Paper';

function createData(name, calories, fat, carbs, protein) {
  return { name, calories, fat, carbs, protein };
}

const rows = [
  createData('Frozen yoghurt', 159, 6.0, 24, 4.0),
  createData('Ice cream sandwich', 237, 9.0, 37, 4.3),
  createData('Eclair', 262, 16.0, 24, 6.0),
  createData('Cupcake', 305, 3.7, 67, 4.3),
  createData('Gingerbread', 356, 16.0, 49, 3.9),
];

export default function DenseTable() {
  return (
    <TableContainer component={Paper}>
      <Table sx={{ minWidth: 650 }} size="small" aria-label="a dense table">
        <TableHead>
          <TableRow>
            <TableCell>Dessert (100g serving)</TableCell>
            <TableCell align="right">Calories</TableCell>
            <TableCell align="right">Fat&nbsp;(g)</TableCell>
            <TableCell align="right">Carbs&nbsp;(g)</TableCell>
            <TableCell align="right">Protein&nbsp;(g)</TableCell>
          </TableRow>
        </TableHead>
        <TableBody>
          {rows.map((row) => (
            <TableRow
              key={row.name}
              sx={{ '&:last-child td, &:last-child th': { border: 0 } }}
            >
              <TableCell component="th" scope="row">
                {row.name}
              </TableCell>
              <TableCell align="right">{row.calories}</TableCell>
              <TableCell align="right">{row.fat}</TableCell>
              <TableCell align="right">{row.carbs}</TableCell>
              <TableCell align="right">{row.protein}</TableCell>
            </TableRow>
          ))}
        </TableBody>
      </Table>
    </TableContainer>
  );
}