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