Material UI DataGrid行边框设置问题求助

右侧边框不显示修复 #

.MuiDataGrid-row的右侧边框默认会被DataGrid的容器裁剪，可通过以下方式解决：

方式1：调整行盒模型与宽度 #

通过box-sizing和宽度补偿，让边框完整显示：

.MuiDataGrid-row {
  box-sizing: border-box;
  border: 1px solid #e0e0e0;
  width: calc(100% + 1px); /* 抵消右侧边框被容器裁剪的部分 */
}

方式2：给最后一列单元格补右侧边框 #

若不想修改行宽度，可单独为每行最后一个单元格添加右侧边框：

.MuiDataGrid-row {
  border: 1px solid #e0e0e0;
  border-right: 0;
}
.MuiDataGrid-row .MuiDataGrid-cell:last-child {
  border-right: 1px solid #e0e0e0;
}

行边框重叠（双重边框）修复 #

利用相邻兄弟选择器，移除非首行的顶部边框，避免和上一行底部边框重叠：

.MuiDataGrid-row:not(:first-of-type) {
  border-top: 0;
}

完整样式示例 #

将两种问题的修复代码合并，最终样式如下：

.MuiDataGrid-row {
  box-sizing: border-box;
  border: 1px solid #e0e0e0;
  width: calc(100% + 1px);
}
.MuiDataGrid-row:not(:first-of-type) {
  border-top: 0;
}

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