如何将Material UI表格默认圆角改为直角？

嘿，这个问题其实挺容易搞定的，你猜的思路完全正确！就是通过TableContainer来配置它内部的Paper组件，具体操作看下面：

核心方法：给Paper传递square属性 #

因为TableContainer默认用Paper作为容器组件，而Paper的square属性可以直接让它变成直角。你只需要通过TableContainer的对应属性，把square传递给内部的Paper就行。

代码示例（MUI v5及以上版本） #

// 先导入所需组件
import Table from '@mui/material/Table';
import TableContainer from '@mui/material/TableContainer';
import Paper from '@mui/material/Paper';

// 然后在渲染时设置
<TableContainer component={Paper} componentProps={{ square: true }}>
  <Table>
    {/* 这里放你的表格头部、行、单元格等内容 */}
  </Table>
</TableContainer>

兼容MUI v4的写法 #

如果你的项目还在使用MUI v4，写法更直接，直接把square属性加到TableContainer上即可：

<TableContainer component={Paper} square={true}>
  <Table>
    {/* 表格内容 */}
  </Table>
</TableContainer>

原理说明 #

componentProps是MUI v5新增的属性，专门用来给component指定的子组件传递额外的props。这里我们把square: true传给Paper，就覆盖了它默认的圆角样式，让整个表格容器变成直角啦。

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