MUI X Data Grid Pro中GridColumnGroupingModel导入失败问题求助

1. 修正导入路径 #

在5.x版本的@mui/x-data-grid-pro中，GridColumnGroupingModel并未在包的根导出列表中，需要从内部类型模块导入：

import { GridColumnGroupingModel } from "@mui/x-data-grid-pro/models/columnGrouping";

2. 确保启用列分组特性 #

列分组在MUI X 5.x中属于实验性功能，必须在DataGridPro组件中显式开启：

<DataGridPro
  // 其他组件配置项
  experimentalFeatures={{ columnGrouping: true }}
  columnGroupingModel={/* 你的列分组模型数据 */}
/>

3. 版本差异说明 #

5.x全系列的导出结构保持一致，若后续升级到6.x及以上版本，该类型会移至包的根导出，此时可直接使用官方文档中的导入方式：

import { GridColumnGroupingModel } from "@mui/x-data-grid-pro";

额外排查步骤 #

• 清理依赖缓存后重新安装：

  rm -rf node_modules package-lock.json
  npm install
  

• 检查tsconfig.json的模块解析配置，确保TypeScript能正确识别MUI的类型定义文件。

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