如何调整Material UI表格表头高度及样式？sx设置height无效问题

解决表头高度不生效的问题 #

直接给<TableHead>设置height不生效，是因为MUI的<TableRow>和<TableCell>默认带有内边距（padding）和最小高度限制，需要同时调整这几个组件的样式：

方法1：通过sx属性直接设置 #

修改现有代码，给<TableRow>和<TableCell>添加sx样式，覆盖默认的内边距与高度限制：

<TableHead>
  <TableRow sx={{ height: '20px' }}>
    <TableCell 
      hover
      sx={{ 
        padding: '0 16px', // 按需调整内边距
        minHeight: '20px',
        height: '20px',
        display: 'flex',
        alignItems: 'center' // 保证文字垂直居中
      }}
    >
      Dessert (100g serving)
    </TableCell>
    <TableCell 
      align="right"
      sx={{ 
        padding: '0 16px',
        minHeight: '20px',
        height: '20px',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'flex-end' // 配合右对齐实现内容居中
      }}
    >
      Calories
    </TableCell>
    {/* 其余TableCell复用相同样式 */}
    <TableCell align="right" sx={{ padding: '0 16px', minHeight: '20px', height: '20px', display: 'flex', alignItems: 'center', justifyContent: 'flex-end' }}>Fat&nbsp;(g)</TableCell>
    <TableCell align="right" sx={{ padding: '0 16px', minHeight: '20px', height: '20px', display: 'flex', alignItems: 'center', justifyContent: 'flex-end' }}>Carbs&nbsp;(g)</TableCell>
    <TableCell align="right" sx={{ padding: '0 16px', minHeight: '20px', height: '20px', display: 'flex', alignItems: 'center', justifyContent: 'flex-end' }}>Protein&nbsp;(g)</TableCell>
  </TableRow>
</TableHead>

方法2：用styled组件封装（适合多表格复用） #

如果需要在多个表格中复用该表头样式，可借助MUI的styled工具封装组件：

import { styled } from '@mui/material/styles';
import TableRow from '@mui/material/TableRow';
import TableCell from '@mui/material/TableCell';

const StyledTableRow = styled(TableRow)(() => ({
  height: '20px',
}));

const StyledTableCell = styled(TableCell)(() => ({
  padding: '0 16px',
  minHeight: '20px',
  height: '20px',
  display: 'flex',
  alignItems: 'center',
  '&.MuiTableCell-alignRight': {
    justifyContent: 'flex-end',
  },
}));

// 使用封装后的组件
<TableHead>
  <StyledTableRow>
    <StyledTableCell hover>Dessert (100g serving)</StyledTableCell>
    <StyledTableCell align="right">Calories</StyledTableCell>
    <StyledTableCell align="right">Fat&nbsp;(g)</StyledTableCell>
    <StyledTableCell align="right">Carbs&nbsp;(g)</StyledTableCell>
    <StyledTableCell align="right">Protein&nbsp;(g)</StyledTableCell>
  </StyledTableRow>
</TableHead>

调整表头列宽度 #

给目标<TableCell>添加width样式即可设置列宽，示例：

<StyledTableCell hover sx={{ width: '200px' }}>Dessert (100g serving)</StyledTableCell>

若遇到内容撑开列宽的情况，可给外层<Table>添加sx={{ tableLayout: 'fixed' }}强制列宽生效。

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