如何移除Material-UI表格单元格（TableCell）的顶部内边距

我在使用Material-UI构建表格时遇到了一个问题：已经给tableCell设置了padding: 0，但单元格顶部还是有多余的内边距，导致"OIL LEVEL"文本没法靠在单元格最顶部。相关代码如下：

样式定义 #

const style = theme => ({ 
  table: { maxHeight: '90vh', }, 
  tableCell: { 
    textAlign: 'center', 
    border: "solid", 
    borderColor: '#000', 
    borderWidth: 1, 
    padding: 0, 
  } 
})

表格组件代码 #

<TableContainer component={Paper}>
  <Table className={classes.table} aria-label="simple table">
    <TableBody>
      <TableRow>
        <TableCell colSpan={2} className={classes.tableCell}>
          { this.getOilIndicator(data) }
        </TableCell>

辅助函数getOilIndicator #

getOilIndicator(data) { 
  return ( 
    <> 
      <Typography variant="subtitle1" align="center" >{"OIL LEVEL"}</Typography> 
      <div> 
        <Grid xs item> 
          { this.getDevice(_.find(this.state.devices, { "id": 5 }), data) } 
        </Grid> 
      </div> 
    </> 
  ) 
}

请问该怎么移除这个多余的顶部内边距，让文本完全贴住单元格顶部？

这问题我之前也踩过坑！其实不是TableCell的padding没生效，而是你嵌套在里面的Typography和Grid组件自带默认的margin/padding，把它们的默认样式去掉就行，具体可以这么操作：

• 移除Typography的默认margin
  Material-UI的Typography组件（尤其是subtitle1这个变体）默认自带顶部和底部的margin，这就是导致文本没法贴顶的元凶。你可以给它加个自定义样式清除margin：

首先在样式定义里新增：

const style = theme => ({ 
  // 保留原有样式...
  oilLevelText: {
    marginTop: 0,
    marginBottom: 0, // 如果不需要文本和下方Grid的间距，也可以一起去掉
  }
})

然后把这个样式应用到Typography上：

<Typography variant="subtitle1" align="center" className={classes.oilLevelText}>{"OIL LEVEL"}</Typography>

• 清除Grid的默认内边距（可选但保险）
  Grid组件默认会有横向的padding，虽然它不是顶部间距的主要原因，但如果后续还有布局问题，可以给Grid加上spacing={0}或者自定义样式清除padding：

// 方法1：使用spacing属性
<Grid xs item spacing={0}>
  { this.getDevice(_.find(this.state.devices, { "id": 5 }), data) }
</Grid>

// 方法2：自定义样式
// 先在style里新增
gridItem: {
  padding: 0,
}
// 再应用到Grid
<Grid xs item className={classes.gridItem}>
  { this.getDevice(_.find(this.state.devices, { "id": 5 }), data) }
</Grid>

• 确认TableCell样式优先级（排查用）
  如果上面两步做完还是有问题，可能是Material-UI的默认样式优先级更高，你可以试试给TableCell的padding加上!important临时验证（不推荐长期使用，仅用于排查），或者用嵌套选择器提升优先级：

tableCell: { 
  textAlign: 'center', 
  border: "solid", 
  borderColor: '#000', 
  borderWidth: 1, 
  padding: 0,
  // 用嵌套选择器确保优先级
  '&:first-child': {
    paddingTop: 0,
  }
}

做完这些操作，"OIL LEVEL"应该就能完全贴住单元格顶部了！

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