Question

enter code here我正在尝试覆盖材料表中的分页组件。我添加的功能运行良好 - 但是我在控制台中收到警告。警告如下。

<块引用>

Material-UI：提供给 classes 道具的键 selectRoot 不是在 MTablePaginationInner 中实现。您只能覆盖其中之一以下：根。

Material-UI：提供给 classes 道具的键 caption 不是在 MTablePaginationInner 中实现。您只能覆盖其中之一以下：根

这里是material-ui表的代码片段

        <MaterialTable 
            columns={columns} 
            data={invoices} 
            icons={IconsForMaterialTable}
            options={{ paging:true}}
            components={{
                Pagination: (subProps) => {
                    return <Box display="flex" justifyContent="flex-end"> <Box width="260px" justifyContent="flex-end">
                        <MTablePagination {...subProps} count={pageCount} onChangePage={(e, page) => setPage(page)} page={page} rowsPerPage={rowsPerPage}/>
                    </Box></Box>
                }}}
        />

Answer 1

您看到的警告告诉您您正在将名为 classes 的道具传递给 MTablePagination 组件，classes 对象如下所示，例如：

const classes = {
  root: "some_class_name",
  selectRoot: "another_class_name",
  caption: "one_more_class_name"
}

但是 MTablePagination 不使用 selectRoot 和 caption 等少数类属性，而是仅使用 root 属性（可以在source-code）。

因此，您可以安全地忽略这些警告或编写如下内容将其删除：

components={{
  Pagination: (subProps) => {
      return <Box display="flex" justifyContent="flex-end"> <Box width="260px" justifyContent="flex-end">
          <MTablePagination {...subProps} classes={{root: subProps.classes.root}} /* Rest of the code, removed for brevity.*/ />
      </Box></Box>
  }}}
                                           ^^^^ Passing classes

材料表覆盖分页组件导致警告

1 个答案: