向 MUI DataGrid 行添加边框

Question

我正在尝试将 Material UI DataGrid 行设置为有边框，类似于此屏幕截图（我审查了一些信息，但你明白了）

我遇到的问题是我无法显示正确的边框（下面的codesandbox）

.MuiDataGrid-row到目前为止，我尝试用以下方式设计全局类border: 1除了右侧的所有边框都被应用，我不明白为什么。

同样采用这种方法，第一行有双底边框，因为第二行顶边框重叠，看起来很奇怪，如果你也能帮我解决这个问题那就太好了！

Answer 1

有两种方法

方法一：（简单）

添加showCellRightBorder={true}到您的Datagrid组件

方法2：（提供定制）

将以下 css 添加到您的Componentsx属性中Datagrid。

CODE TO BE REMOVED:
// "& .MuiDataGrid-row": {
//   borderTop: 1,
//   borderBottom: 0
// },

CODE TO BE ADDED:
"& .MuiDataGrid-cell": {
border: 1,
borderRight: 0,
borderTop: 0,
// add more css for customization
},