如何在 mui datagrid 中实现表头文字顶部居中对齐？mui datagrid 默认表头文字垂直居中，若需多行表头（换行）时顶部对齐，不能直接使用 `verticalalign`，而应通过修改 `.muidatagrid-columnheadertitlecontainer` 的 `alignitems` 属性实现。
在使用 MUI DataGrid 且启用了表头换行（如设置 whiteSpace: “normal”）的场景下，开发者常误以为给 .MuiDataGrid-columnHeaderTitle 添加 verticalAlign: “top” 即可实现顶部对齐。但该样式实际无效——因为 verticalAlign 对 display: block（标题容器默认为 flex item）元素无作用；真正控制文字在容器内垂直位置的是其父容器（即标题内容区 .MuiDataGrid-columnHeaderTitleContainer）的 align-items 属性。
✅ 正确做法是：将 .MuiDataGrid-columnHeaderTitleContainer 的 alignItems 设为 “start”（对应 Flex 布局中的顶部对齐），同时确保标题本身支持换行：
const datagridSx = {
".MuiDataGrid-columnHeaderTitleContainer": {
alignItems: "start", // ✅ 关键：使多行文本顶部对齐
},
"& .MuiDataGrid-columnHeaders": {
height: "unset !important",
maxHeight: "168px !important", // 允许表头区域自适应高度（必要时）
},
"& .MuiDataGrid-columnHeaderTitle": {
whiteSpace: "normal", // ✅ 启用换行
lineHeight: "1.4", // 推荐：提升多行可读性（非必须，但更美观）
fontWeight: "bold",
textAlign: "center", // 可选：水平居中（与顶部对齐配合形成“顶中”效果）
},
};
? 注意事项：
- alignItems: “start” 是 Flex 布局标准值，兼容所有现代浏览器；避免使用 “flex-start”（虽等效，但 MUI 内部 CSS-in-JS 解析更稳定支持 “start”）；
- 若列宽较窄导致文字频繁折行，建议结合 minWidth 或 width 列配置，防止过度压缩影响可读性；
- 不要滥用 !important —— 仅当存在深层样式覆盖冲突时保留；日常开发中优先通过提高 CSS 选择器特异性或使用 theme.components 进行主题化定制；
- 如需全局生效，可将该样式注入主题（createTheme({ components: { MuiDataGrid: { styleOverrides: { … } } } })）。
通过以上配置，即可优雅实现多行表头的「顶部+水平居中」对齐效果，显著提升复杂表格（如含分组/多级表头）的视觉一致性与专业度。