如何为Material UI的TableHead组件设置圆角样式

直接给TableHead设置圆角不生效有两个核心原因：

• MUI 默认Table组件开启了border-collapse: collapse属性，该模式下表头<thead>元素的border-radius不会被浏览器渲染
• TableHead本身不直接承载表格单元格的背景色，你设置的背景色和圆角会被内部的TableCell元素覆盖展示区域

按如下两步修改即可实现表头圆角效果：

1. 给Table组件添加样式，关闭border-collapse并消除单元格间隙
2. 给表头内第一个和最后一个TableCell分别设置左上、右上圆角，所有表头TableCell统一设置背景色

修改后的完整代码如下：

<TableContainer>
  <Table 
    aria-label="customized table"
    style={{ borderCollapse: 'separate', borderSpacing: 0 }}
  >
    <TableHead>
      <TableRow>
        <TableCell 
          style={{ 
            backgroundColor: '#E2E2E2',
            borderTopLeftRadius: '10px'
          }}
        >
          Dessert (100g serving)
        </TableCell>
        <TableCell 
          align="right" 
          style={{ backgroundColor: '#E2E2E2' }}
        >
          Calories
        </TableCell>
        <TableCell 
          align="right" 
          style={{ backgroundColor: '#E2E2E2' }}
        >
          Fat&nbsp;(g)
        </TableCell>
        <TableCell 
          align="right" 
          style={{ backgroundColor: '#E2E2E2' }}
        >
          Carbs&nbsp;(g)
        </TableCell>
        <TableCell 
          align="right" 
          style={{ 
            backgroundColor: '#E2E2E2',
            borderTopRightRadius: '10px'
          }}
        >
          Protein&nbsp;(g)
        </TableCell>
      </TableRow>
    </TableHead>
    <TableBody>
      {rows.map((row) => (
        <TableRow key={row.name}>
          <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>

如果使用MUI v5的sx属性可以简化重复的背景色设置，给TableRow添加sx={{ '& th': { bgcolor: '#E2E2E2' } }}即可统一设置所有表头单元格的背景色。

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