从组件库导入MUI X DataGrid并使用GridToolbar时出现错误

问题场景 #

我基于@mui/x-data-grid的DataGrid封装了一个Table组件库，核心代码如下：

// Table组件
import { DataGrid, DataGridProps } from '@mui/x-data-grid';

export const Table = ({ ...rest }: DataGridProps) => {
  return <DataGrid rowHeight={40} {...rest} />;
};

在组件库内部使用该Table并搭配GridToolbar时一切正常：

import { GridToolbar } from '@mui/x-data-grid';
import { Table } from './Table';

// 省略行/列配置
<Table
  // rows, columns等配置...
  slots={{ toolbar: GridToolbar }}
  slotProps={{
    toolbar: {
      showQuickFilter: true,
      quickFilterProps: { debounceMs: 300 },
    },
  }}
/>

但将该Table组件导入到另一个名为AppPackage的项目中，使用完全相同的代码时，会抛出以下错误：

index.tsx:36 Error: MUI: useGridRootProps should only be used inside the DataGrid, DataGridPro or DataGridPremium component.
    at useGridRootProps (useGridRootProps.js:6:1)
    at GridToolbar (GridToolbar.js:27:1)
    at renderWithHooks (react-dom.development.js:14128:1)
    at updateForwardRef (react-dom.development.js:16702:1)
    at beginWork (react-dom.development.js:18749:1)
    at beginWork$1 (react-dom.development.js:23672:1)
    at performUnitOfWork (react-dom.development.js:22942:1)
    at workLoopSync (react-dom.development.js:22865:1)
    at renderRootSync (react-dom.development.js:22838:1)
    at recoverFromConcurrentError (react-dom.development.js:22330:1) 

组件库和AppPackage均使用"@mui/x-data-grid": "6.18.4"版本，通过yarn link链接组件库时能正常运行，取消链接后问题重现。

问题原因 #

核心原因是项目中存在多份@mui/x-data-grid实例：组件库和AppPackage各自安装了独立的包副本，导致GridToolbar所在的上下文无法识别组件库中DataGrid提供的Grid上下文，触发useGridRootProps的校验错误。

解决方案 #

方案1：统一依赖实例，避免重复安装 #

1. 将组件库中的@mui/x-data-grid设置为peer依赖，确保它使用AppPackage中的实例：

   // 组件库package.json
   {
     "peerDependencies": {
       "@mui/x-data-grid": "^6.18.4"
     }
   }
   

2. 在AppPackage的package.json中添加resolutions，强制统一依赖版本：

   // AppPackage package.json
   {
     "resolutions": {
       "@mui/x-data-grid": "6.18.4"
     }
   }
   

3. 清理两边的node_modules和lock文件，重新执行yarn install。

方案2：组件库内部封装Toolbar，避免跨包传递组件 #

在组件库中封装GridToolbar，对外暴露配置项而非让外部传入组件：

// 组件库中新增CustomGridToolbar
import { GridToolbar } from '@mui/x-data-grid';

export const CustomGridToolbar = (props) => {
  return <GridToolbar {...props} />;
};

// 修改Table组件，默认使用自定义Toolbar并接受配置
import { DataGrid, DataGridProps } from '@mui/x-data-grid';

type TableProps = DataGridProps & {
  toolbarProps?: React.ComponentProps<typeof GridToolbar>;
};

export const Table = ({ toolbarProps, ...rest }: TableProps) => {
  return (
    <DataGrid
      rowHeight={40}
      slots={{ toolbar: CustomGridToolbar }}
      slotProps={{ toolbar: toolbarProps }}
      {...rest}
    />
  );
};

AppPackage中只需导入Table组件并传递配置：

import { Table } from '@company/component-lib';

<Table
  // rows, columns等配置...
  toolbarProps={{
    showQuickFilter: true,
    quickFilterProps: { debounceMs: 300 },
  }}
/>

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