MUI v5 DataGrid固定列如何显示表头行分隔线

问题描述 #

给MUI DataGrid配置固定列（pinned columns）功能时，固定列区域的表头没有显示底部浅灰色分隔线，和非固定列的表头样式不统一。
我需要调整样式让固定列表头和普通表头表现一致，保留底部分隔线，调试定位样式节点后已经实现目标效果，把可用方案整理如下，也欢迎大家提出优化建议与反馈。

实现方案 #

问题根源是固定列的表头单元格为了实现滚动时不偏移的固定效果，设置了高于表头容器的z-index，直接遮挡了表头容器本身的底部边框，才会出现固定列区域看不到表头分隔线的情况。
直接给固定列内的表头单元格追加和全局表头一致的底部边框即可，不会影响滚动、固定等原有交互：

/* 适配默认浅色主题 */
.MuiDataGrid-pinnedColumns .MuiDataGrid-columnHeader {
  border-bottom: 1px solid #e0e0e0;
}

/* 适配MUI官方主题变量，支持深色/浅色模式自动切换（推荐写法） */
.MuiDataGrid-pinnedColumns .MuiDataGrid-columnHeader {
  border-bottom: 1px solid var(--DataGrid-rowBorderColor);
}

如果需要单独调整左侧/右侧固定列的样式，可以使用带方向修饰的类名精准命中对应节点：

• 左侧固定列容器类名：.MuiDataGrid-pinnedColumns--left
• 右侧固定列容器类名：.MuiDataGrid-pinnedColumns--right

避坑提示：不要尝试通过调低固定列z-index的方式露出底层表头的边框，这种写法会导致滚动表格时普通单元格覆盖在固定列上方，引发表头、单元格内容错位的问题。

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