导入@mui/x-data-grid的GridActionsCellItem提示未导出报错如何解决

开发者阿泽

2026-10-2

GridActionsCellItem导入报错原因及解决方案

报错原因

GridActionsCellItem 属于MUI X Data Grid的付费功能组件，仅在 @mui/x-data-grid-pro、@mui/x-data-grid-premium 版本中提供导出，你当前安装的社区免费版@mui/x-data-grid不包含该组件，因此会触发导入失败错误。
你参考的官方示例默认使用Pro版本依赖，直接复制代码到免费版项目中会出现不兼容问题。

解决方案

你可以根据项目需求选择以下任意一种方案解决：

方案1：升级到付费版本

如果项目允许使用付费商业依赖，直接替换对应包即可：

卸载现有免费版本依赖

npm uninstall @mui/x-data-grid

安装Pro版本依赖

npm install @mui/x-data-grid-pro

修改导入路径

import { GridActionsCellItem } from '@mui/x-data-grid-pro';

方案2：手动封装等效组件（免费）

如果不需要使用Pro版本的其他付费功能，可以自行实现同等效果的动作按钮组件：

// 从@mui/material导入基础组件
import { MenuItem, Typography } from '@mui/material';

// 自定义GridActionsCellItem替代组件
const CustomGridActionsCellItem = ({ label, icon, onClick, disabled = false, ...rest }) => {
  return (
    <MenuItem onClick={onClick} disabled={disabled} {...rest}>
      {icon ?? null}
      <Typography variant="body2">{label}</Typography>
    </MenuItem>
  );
};

使用方式和官方的GridActionsCellItem完全一致，直接替换即可。