如何替换Material UI X Timepicker中的默认时钟SVG图标

你此前通过testid匹配ClockIcon替换失败，核心原因是找错了组件对外暴露的可替换插槽名称，ClockIcon是MUI内置图标库的组件名，不是Time-Picker开放的自定义替换位标识。

可替换插槽的正确名称 #

全版本全变体（Desktop/Mobile/Static）的Time-Picker中，输入框尾部用于触发时间选择面板的图标，对应的可替换插槽名为 OpenPickerIcon。

版本对应实现代码 #

注意：MUI X v5 版本使用components属性传入自定义组件，v6及以上版本统一使用slots属性，两个版本的插槽命名完全一致。

v6及以上版本实现 #

import { TimePicker } from '@mui/x-date-pickers/TimePicker';

// 自定义Chevron形SVG组件
const CustomChevronIcon = (props) => (
  <svg {...props} viewBox="0 0 24 24" fill="none" stroke="currentColor">
    {/* 替换为实际项目使用的Chevron路径，例如下拉触发常用向下Chevron */}
    <path d="M6 9l6 6 6-6" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
  </svg>
);

export default function AppTimePicker() {
  return (
    <TimePicker
      label="选择时间"
      slots={{
        openPickerIcon: CustomChevronIcon
      }}
      // 如需给自定义图标传属性（尺寸、颜色等），通过slotProps配置
      slotProps={{
        openPickerIcon: {
          fontSize: 'small'
        }
      }}
    />
  );
}

v5版本实现 #

<TimePicker
  label="选择时间"
  components={{
    OpenPickerIcon: CustomChevronIcon
  }}
  componentsProps={{
    openPickerIcon: {
      fontSize: 'small'
    }
  }}
/>

补充说明 #

• 不推荐通过testid查找DOM节点替换图标的写法，这种hack方式会被React重渲染逻辑覆盖，稳定性极差。
• 除面板触发图标外，Time-Picker其余内置图标也可通过相同插槽方式替换：左右切换月份/小时段的箭头图标对应插槽名分别为LeftArrowIcon、RightArrowIcon。

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