MUI 如何更改 TablePagination 组件内的图标？答案

【问题标题】：MUI how can I change the icon inside the TablePagination component?MUI 如何更改 TablePagination 组件内的图标？
【发布时间】：2021-12-29 08:21:01
【问题描述】：

在我的 React 项目中，我使用了名为 TablePagination 的 MUI 组件

TablePagination 组件嵌套在Table 组件内，如下图所示。

查看下拉按钮如何有一个向下的实心箭头。如何将其更改为不同的 SVG 图标。

我希望新的TablePagination 具有下图中的箭头图标。

https://codesandbox.io/s/ijm5r?file=/demo.js

这是此示例的沙盒链接。

【问题讨论】：

标签： javascript reactjs svg material-ui

【解决方案1】：

您可以在TablePagination 中添加Select 的自定义图标，如下所示：

<TablePagination
  SelectProps={{
    IconComponent: KeyboardArrowDownIcon,
  }}

【讨论】：

“SelectProps”道具是对所有其他复合组件通用的吗？换句话说，我可以总是使用“SelectProps”道具来覆盖这样的嵌套组件吗？