React项目中@mui/x-data-grid的loadingOverlay属性赋值报错问题

错误原因 #

你使用的是免费版@mui/x-data-grid，而loadingOverlay是@mui/x-data-grid-pro（Pro版）或@mui/x-data-grid-premium（Premium版）专属的属性，免费版DataGrid的类型定义中并不包含该属性，因此TypeScript会抛出类型错误。

解决方案 #

方案1：用免费版的方式自定义加载覆盖层（无需升级）

免费版DataGrid通过slotProps.loadingOverlay配置自定义加载内容，同时需要配合loading布尔属性控制显示状态：

修改你的DataGrid组件代码：

<DataGrid
  columns={columns}
  rows={data}
  rowHeight={50}
  paginationMode="server"
  pageSizeOptions={[]}
  initialState={{
    pagination: {
      paginationModel: {
        page: pagination?.page || 0,
        pageSize: pagination?.pageSize || 15,
      },
    },
  }}
  rowCount={rowCount}
  onPaginationModelChange={handlePageChange}
  filterMode="server"
  filterDebounceMs={500}
  getRowId={(row) => row._id}
  onRowClick={(tableData) => {
    if (handleRowClick) {
      handleRowClick(tableData.row._id);
    }
    if (handleAllRowClick) {
      handleAllRowClick(tableData.row);
    }
  }}
  localeText={esES.components.MuiDataGrid.defaultProps.localeText}
  // 替换原有loadingOverlay为以下配置
  loading={props.loading}
  slotProps={{
    loadingOverlay: {
      children: <img src="/loader_rips.gif" alt="Loading..." />
    }
  }}
  {...props}
/>

方案2：升级到Pro/Premium版本（支持直接使用loadingOverlay）

如果需要直接使用loadingOverlay属性，可以升级到Pro版：

1. 安装Pro版依赖：

npm install @mui/x-data-grid-pro@6.19.5
# 或使用yarn
yarn add @mui/x-data-grid-pro@6.19.5

2. 替换导入语句：

import { DataGridPro, GridColDef, esES } from "@mui/x-data-grid-pro";

3. 将组件替换为DataGridPro，此时loadingOverlay属性即可正常使用：

<DataGridPro
  // 保留原有所有属性...
  loadingOverlay={<img src="/loader_rips.gif" alt="Loading..." />}
  {...props}
/>

额外注意 #

如果使用方案1，确保CustomTableProps中的loading属性正确传递给组件，当loading为true时，自定义的加载覆盖层才会显示。

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