@material-ui/core 4.12.3无法引入@mui/x-data-grid及新旧版本兼容方案咨询

安全阿岳

2026-10-4

MUI v4环境x-data-grid报错解决方案与版本兼容配置

报错根因

@mui/x-data-grid 是MUI v5及后续版本的包命名规范，你当前使用的@material-ui/core v4.12.3属于v4版本，对应的数据网格组件包名为@material-ui/data-grid，最高适配版本为4.x分支，直接导入v5版本包名会触发模块找不到的报错。

旧版本组件文档获取

你可以在安装对应版本的组件包后，直接查看包内的README文件、TypeScript类型声明文件获取完整用法，也可以在MUI官方文档站切换版本号至v4分支，筛选对应@material-ui/data-grid版本查看组件文档。

单版本适配方案（无需共存v5）

如果暂时不需要升级MUI到v5，直接用v4版本的对应组件即可：

先卸载错误安装的v5版本包（如果有）：
npm uninstall @mui/x-data-grid 或 yarn remove @mui/x-data-grid
安装v4适配的数据网格包：
npm install @material-ui/data-grid@^4.0.0 或 yarn add @material-ui/data-grid@^4.0.0

修改导入语句为v4版本的规范：

import { GridOverlay, DataGrid } from '@material-ui/data-grid';

新旧版本共存配置方案

如果需要同时使用v4和v5的MUI组件，通过包别名配置规避命名冲突即可：

安装v5依赖时指定别名，避免和v4包冲突：
npm install mui-v5@npm:@mui/material@latest @emotion/react @emotion/styled @mui/x-data-grid

配置打包工具的路径别名，以webpack为例，在webpack.config.js中添加配置：

const path = require('path');
module.exports = {
  resolve: {
    alias: {
      // 映射v5版本的mui包路径
      '@mui/material': path.resolve(__dirname, 'node_modules/mui-v5'),
      '@mui/x-data-grid': path.resolve(__dirname, 'node_modules/@mui/x-data-grid'),
      // 保留v4版本的包路径映射
      '@material-ui/core': path.resolve(__dirname, 'node_modules/@material-ui/core')
    }
  }
}

若使用vite，在vite.config.ts的resolve.alias字段中做相同配置即可。