如何修改MUI TablePagination组件内部的下拉箭头图标？

要替换MUI TablePagination 组件的下拉箭头图标，通过组件内置的SelectProps配置项即可实现，具体操作如下：

1. 准备目标图标 #

你可以选择两种方式提供要替换的箭头图标：

• 方案A：使用MUI官方图标库的匹配图标（示例为空心向下箭头）

  import ArrowDropDownOutlinedIcon from '@mui/icons-material/ArrowDropDownOutlined';
  

• 方案B：使用自定义SVG图标，直接封装为React组件即可

  // 自定义空心箭头图标示例，可根据你的设计调整样式
  const CustomDownArrow = (props) => (
    <svg {...props} width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor">
      <path d="M6 9l6 6 6-6" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  )
  

2. 配置TablePagination组件 #

给TablePagination新增SelectProps属性，指定IconComponent为你准备好的图标组件即可：

<TablePagination
  // 原有配置保持不变，例如：
  rowsPerPageOptions={[5, 10, 25]}
  count={total}
  page={page}
  rowsPerPage={rowsPerPage}
  onPageChange={handlePageChange}
  onRowsPerPageChange={handleRowsPerPageChange}
  // 新增以下配置替换下拉图标
  SelectProps={{
    IconComponent: CustomDownArrow, // 这里替换为你选的图标组件
    // 若需要额外调整图标样式，可添加sx配置
    sx: {
      '& .MuiSvgIcon-root': {
        fontSize: '18px',
        color: '#666',
      }
    }
  }}
/>

该方案兼容MUI v5、v6所有稳定版本，不会影响分页组件其他原有功能。

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