如何修改 MUI X Date Picker 组件的默认日历图标？

MUI X Date Picker的触发图标属于组件预留的可替换插槽，不需要手动修改输入框装饰，直接调用对应插槽属性即可实现替换，完全规避图标错位、重复渲染等异常问题。

• MUI X v5 版本实现
  用components属性指定替换的图标组件，配合componentsProps可传递图标自定义属性，示例代码：

  import DatePicker from '@mui/x-date-pickers/DatePicker';
  import TextField from '@mui/material/TextField';
  // 导入你的自定义图标，也可以是自己封装的SVG组件
  import CustomCalendarIcon from '@mui/icons-material/EventAvailable';
  
  function MyDatePicker() {
    return (
      <DatePicker
        label="选择日期"
        // 替换默认打开图标
        components={{
          OpenPickerIcon: CustomCalendarIcon
        }}
        // 可选：给自定义图标传属性，比如调整颜色、大小
        componentsProps={{
          openPickerIcon: {
            fontSize: 'small',
            color: 'primary'
          }
        }}
        renderInput={(params) => <TextField {...params} />}
      />
    )
  }
  

• MUI X v6 及更高版本实现
  v6版本废弃了components/componentsProps属性，改用slots/slotProps对应，写法如下：

  import { DatePicker } from '@mui/x-date-pickers/DatePicker';
  import CustomCalendarIcon from '@mui/icons-material/EventAvailable';
  
  function MyDatePicker() {
    return (
      <DatePicker
        label="选择日期"
        slots={{
          openPickerIcon: CustomCalendarIcon
        }}
        slotProps={{
          openPickerIcon: {
            fontSize: 'small',
            color: 'primary'
          }
        }}
      />
    )
  }
  

如果你用的是自己封装的SVG自定义图标，要确保组件接收并透传原生svg标签的属性，避免图标样式、点击交互出现异常。

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