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

Question

我有一个导出

Table

组件的组件库包。该组件使用

DataGrid

中的

@mui/x-data-grid

:

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

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

此表组件在库中工作正常，特别是如果我从

GridToolbar

添加

@mui/x-data-grid

- 这不会产生任何问题（为了简洁省略行/列）：

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

//etc

<Table
 // rows, columns, etc. ...
 slots={{ toolbar: GridToolbar }}
 slotProps={{
  toolbar: {
   showQuickFilter: true,
   quickFilterProps: { debounceMs: 300 },
  },
 }}
/>

但是，当我尝试从我的库导入 Table 并在不同的包中使用相同的代码时，我们将其称为 AppPackage：

import { GridToolbar } from '@mui/x-data-grid';
import { Table } from '@company/component-lib';

//etc

<Table
 // rows, columns, etc. ...
 slots={{ toolbar: GridToolbar }}
 slotProps={{
  toolbar: {
   showQuickFilter: true,
   quickFilterProps: { debounceMs: 300 },
  },
 }}
/>

我收到此错误：

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

并在 AppPackage 中运行

yarn link @company/component-lib

，它就可以工作。但是一旦我

yarn unlink @company/component-lib

我就遇到了同样的问题，说我需要在数据网格中使用GridToolbar。

Answer 1

需要将

@mui/x-data-grid

添加到组件库的对等依赖中。