向 MUI DataGrid 行添加边框

Question

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

我遇到的问题是我无法让正确的边框出现（下面的 codesandbox）

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

同样使用这种方法，第一行有双底边框，因为第二行顶部边框重叠并且看起来很奇怪，如果你能帮我一下那也太好了！

Answer 1

有两种方法

方法一：（简单）

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

方法二：（提供定制）

将以下 css 添加到Datagrid组件的sx属性中。

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
},