React MUI DataGrid如何将type为number的列头部和内容左对齐

直接在对应type: "number"的列定义中添加align和headerAlign属性，手动指定为左对齐即可：

const columns = [
  // 其他列配置
  {
    field: 'age',
    type: 'number',
    align: 'left', // 控制单元格内容左对齐
    headerAlign: 'left', // 控制列头部左对齐
  }
];

如果项目中所有number类型的列都需要左对齐，不需要逐个列重复配置，可以覆写DataGrid的默认列类型规则：

import { DataGrid, gridNumberColumnDef } from '@mui/x-data-grid';

// 自定义列类型，覆写number类型的默认对齐规则
const customColumnTypes = {
  number: {
    ...gridNumberColumnDef,
    align: 'left',
    headerAlign: 'left',
  }
};

// 组件内使用时传入自定义列类型配置
function MyTable() {
  return (
    <DataGrid
      rows={rows}
      columns={columns}
      columnTypes={customColumnTypes}
      {/* 其余DataGrid配置项 */}
    />
  )
}

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