React MUI DataGrid 换行表头顶部居中对齐问题求助

你的代码里的verticalAlign: "top"没生效，核心原因是MUI DataGrid的列标题单元格默认采用flex布局，verticalAlign属性对flex子元素不生效，得用flex相关样式调整垂直对齐逻辑。

试试修改后的sx配置：

const datagridSx = {
  '& .MuiDataGrid-columnHeaders': {
    height: 'unset !important',
    maxHeight: '168px !important',
  },
  '& .MuiDataGrid-columnHeader': {
    // 让列标题容器内的内容顶部对齐
    alignItems: 'flex-start',
  },
  '& .MuiDataGrid-columnHeaderTitle': {
    whiteSpace: 'normal',
    lineHeight: 'normal',
    fontWeight: 'bold',
    // 实现文本水平居中
    textAlign: 'center',
    // 确保标题在容器内垂直顶部对齐
    alignSelf: 'flex-start',
  },
};

关键修改说明： #

• 给.MuiDataGrid-columnHeader添加alignItems: 'flex-start'：这个类是列标题的外层容器，默认是alignItems: center，改成flex-start后，内部标题文本会靠顶部排列
• 给.MuiDataGrid-columnHeaderTitle添加textAlign: 'center'：保证换行后的文本水平居中，同时用alignSelf: 'flex-start'强化垂直顶部对齐的效果
• 保留你原来设置的换行、行高、字体加粗等样式，确保表头文本能正常换行

如果遇到样式被默认规则覆盖的情况，可以给关键属性加上!important（比如alignItems: 'flex-start !important'），但优先尝试不加，避免破坏MUI原生样式优先级。

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