MUI X DataGrid替换分页组件出现<td>不能作为<div>子元素的DOM嵌套报错

问题根源 #

你出现这个DOM嵌套警告的核心原因是选错了分页组件：

• TablePagination 是MUI核心库为原生<table>组件设计的分页组件，它内部默认会渲染<tr>、<td>这类表格专属的DOM元素，要求父容器必须是<table>相关标签
• 而DataGrid的分页插槽默认的父容器是普通<div>标签，直接把TablePagination塞进去就会出现<td>作为<div>子元素的非法嵌套警告。

解决方案 #

方案1：使用DataGrid配套的分页组件（推荐） #

如果只是要自定义分页的文案、按钮状态，不需要替换整个Pagination组件，直接通过componentsProps.pagination传参数即可，无需覆盖components.Pagination配置。如果确实需要替换自定义分页，也可以用根元素为<div>的Pagination组件做替换，不会出现嵌套问题。

方案2：给TablePagination指定组件根元素 #

如果你一定要沿用TablePagination的样式和交互，可以通过component属性修改它的根元素，规避嵌套问题：

components={{ 
  Pagination: (props) => <TablePagination component="div" {...props} /> 
}}

给TablePagination加component="div"属性后，它内部就不会渲染<tr>、<td>这类表格元素，而是用<div>替代，即可消除DOM嵌套警告。

修复后完整代码 #

import { TablePagination } from "@mui/material";
import { DataGrid, GridColumns } from "@mui/x-data-grid";

export default function App() {
  const columns: GridColumns = [
    {
      field: "foo"
    }
  ];

  const rows = [
    {
      id: "bar"
    }
  ];

  return (
    <div style={{ height: 500 }}>
      <DataGrid
        columns={columns}
        rows={rows}
        components={{ 
          Pagination: (props) => <TablePagination component="div" {...props} /> 
        }}
        componentsProps={{
          pagination: {
            count: 1,
            page: 0,
            onPageChange: () => {},
            rowsPerPage: 10,
            rowsPerPageOptions: [10, 25, 50, 100],
            onRowsPerPageChange: () => {},
            labelRowsPerPage: "Zeilen pro Seite",
            labelDisplayedRows: () => `Seite ${1} von ${1}`,
            nextIconButtonProps: {
              disabled: true
            }
          }
        }}
      />
    </div>
  );
}

内容的提问来源于stack exchange，提问作者Sean A.S. Mengis