Material-UI DataGrid列宽充足但列名被截断该如何解决？

问题现象：Material-UI DataGrid列空间充足但列名出现截断

该问题是DataGrid默认给列头标题添加了溢出隐藏样式、自动列宽逻辑默认不参考列头文本长度导致，可按需选择以下方案修复：

• 方案1：全局取消所有列的头截断规则
  给DataGrid组件添加sx属性覆盖内置样式，适配所有列都需要完整展示列名的场景：

  <DataGrid
    columns={columns}
    rows={rows}
    sx={{
      '.MuiDataGrid-columnHeaderTitle': {
        overflow: 'visible',
        // 允许列头换行，不需要换行可替换为 `whiteSpace: 'nowrap'`
        whiteSpace: 'normal',
        lineHeight: '1.2'
      }
    }}
  />
  

• 方案2：仅针对指定列取消截断
  给目标列单独配置自定义类名，不影响其他列的默认表现：
  1. 列定义时添加headerClassName属性

  const columns = [
    {
      field: 'targetField',
      headerName: '较长的完整列名',
      headerClassName: 'no-truncate-header',
      width: 220
    },
    // 其余列配置
  ]
  

  2. 添加对应样式规则

  .no-truncate-header .MuiDataGrid-columnHeaderTitle {
    overflow: visible;
    white-space: nowrap;
  }
  

• 方案3：自动列宽场景适配
  如果你开启了自动列宽功能，需添加配置让列宽计算包含列头文本长度：

  <DataGrid
    columns={columns}
    rows={rows}
    autosizeOnMount
    autosizeOptions={{
      includeHeaders: true,
      includeOutliers: true
    }}
  />
  

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