MUI TablePagination 能够使用自定义 Popper

Question

我希望能够使用我自己构建的自定义 Popper 组件，某些 MUI 组件（例如 AutoComplete）通过提供道具 PopperComponent 来实现这一点，但是 TablePagination 没有任何其他功能向他们的 popper 添加一个类。

有谁知道将自定义 Popper 组件与 MUI TablePagination 组件一起使用的方法吗？

为了快速参考，以下是上述每个组件的 API 文档

• TablePagination-https://mui.com/material-ui/api/table-pagination/#props
• 自动完成 - https://mui.com/material-ui/api/autocomplete/#props

Answer 1

Material-UI 中的 TablePagination 组件不提供用于指定自定义 Popper 组件的道具，但您可以尝试使用 classes 道具来覆盖 TablePagination 使用的默认 Popper 组件的样式。

这是一个示例，说明如何使用 classes 属性将自定义样式应用于 TablePagination 使用的 Popper 组件：

import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import TablePagination from '@material-ui/core/TablePagination';

const useStyles = makeStyles({
  popper: {
    // Custom styles for the Popper component
  }
});

function MyTablePagination(props) {
  const classes = useStyles();

  return (
    <TablePagination
      classes={{
        popper: classes.popper
      }}
      {...props}
    />
  );
}

在此示例中，Popper 组件的自定义样式在 useStyles 挂钩中定义，然后使用 classes prop 应用于 Popper 组件。然后，您可以在您的应用程序中使用此自定义 MyTablePagination 组件，而不是默认的 TablePagination 组件。

或者，如果您想使用自定义 Popper 组件，您可以尝试使用 Material-UI 中的 withStyles 高阶组件来创建一个使用自定义 Popper 组件的新 TablePagination 组件。这是您如何做到这一点的示例：

import React from 'react';
import { withStyles } from '@material-ui/core/styles';
import TablePagination from '@material-ui/core/TablePagination';
import MyCustomPopper from './MyCustomPopper';

const styles = {
  popper: {
    // Custom styles for the Popper component
  }
};

function MyTablePagination(props) {
  const { classes, ...other } = props;

  return (
    <TablePagination
      PopperComponent={MyCustomPopper}
      classes={{
        popper: classes.popper
      }}
      {...other}
    />
  );
}

export default withStyles(styles)(MyTablePagination);

在此示例中，使用 PopperComponent 属性指定自定义 Popper 组件，并使用 classes 属性和 withStyles 高阶组件应用自定义样式。然后，您可以像使用默认 TablePagination 组件一样在您的应用程序中使用自定义 MyTablePagination 组件。