为 MUI DataGrid 行添加边框

Question

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

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

到目前为止，我尝试使用

.MuiDataGrid-row

为全局类

border: 1

设置样式，除了右边的所有边框都被应用，我不明白为什么。

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

Answer 1

有两种方法

方法一：（简单）

将

showCellRightBorder={true}

添加到您的

Datagrid

组件

方法二：（提供定制）

将以下CSS添加到

sx

组件的

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

Answer 2

将

showCellVerticalBorder

添加到您的

DataGrid

组件中用于主体单元格边框，以及

showColumnVerticalBorder

用于标题中的边框

Answer 3

Datagrid 自动设置行宽为'fit-content'，切断最右边的边框。要解决此问题，您需要做的就是使用“&.MuiDataGrid-row”全局类手动将行宽设置为您想要的大小。就我而言，它看起来像

"& .MuiDataGrid-row": {
  border: "1px solid lightgray",
  borderRadius: "5px",
  backgroundColor: "white",
  width: "calc(100% - 2px)",
  marginTop: 3
},