升级@mui/x-date-pickers至6.0.1后修改slotProps致日历图标隐藏求助

问题原因 #

升级到@mui/x-date-pickers v6后，DatePicker的插槽结构发生了变化：

• 若在slotProps.textField中覆盖了endAdornment属性，会直接替换默认的日历图标容器，导致图标隐藏
• 自定义TextField的sx样式时，若设置了overflow: hidden、过窄宽度或不当padding，会把图标挤出可视区域
• 错误的插槽配置方式，未正确关联openPickerIcon的显示逻辑

解决方案 #

方案1：避免覆盖TextField的endAdornment #

确保slotProps.textField中不手动设置endAdornment，让DatePicker自动挂载日历图标：

import { DatePicker } from '@mui/x-date-pickers/DatePicker';
import CalendarIcon from '@mui/icons-material/CalendarToday';

<DatePicker
  label="选择日期"
  slots={{
    openPickerIcon: CalendarIcon // 自定义图标
  }}
  slotProps={{
    textField: {
      sx: {
        // 仅自定义输入框相关样式，不碰endAdornment
        '& .MuiInputBase-input': {
          padding: '8px 12px',
        },
        '& .MuiOutlinedInput-notchedOutline': {
          borderColor: '#ccc',
        }
      }
    }
  }}
/>

方案2：显式保留图标容器（若需自定义endAdornment） #

如果必须自定义TextField的endAdornment，需要手动引入DatePicker提供的图标容器组件：

import { DatePicker, DatePickerInput } from '@mui/x-date-pickers';
import CalendarIcon from '@mui/icons-material/CalendarToday';

<DatePicker
  label="选择日期"
  slots={{
    openPickerIcon: CalendarIcon
  }}
  slotProps={{
    textField: {
      endAdornment: (
        <DatePickerInput.Adornment position="end">
          <CalendarIcon />
        </DatePickerInput.Adornment>
      ),
      sx: {
        // 自定义其他样式
      }
    }
  }}
/>

方案3：修复图标样式隐藏问题 #

检查sx样式中是否存在导致图标隐藏的设置，移除或调整：

// 错误示例：会隐藏图标，需移除对应样式
slotProps={{
  textField: {
    sx: {
      '& .MuiDatePickerInput-icon': {
        display: 'none'
      }
    }
  }
}}

// 正确示例：自定义图标样式
slotProps={{
  textField: {
    sx: {
      '& .MuiDatePickerInput-icon': {
        color: '#1976d2',
        fontSize: '18px'
      }
    }
  },
  openPickerIcon: {
    sx: { cursor: 'pointer' } // 直接给图标插槽设置样式
  }
}}

验证说明 #

以上方案均适配@mui/x-date-pickers 6.0.1版本，核心是遵循v6的插槽设计逻辑：openPickerIcon作为独立插槽存在，无需手动在TextField的endAdornment中重复实现，只需确保TextField的样式或属性不会覆盖默认的图标挂载逻辑。

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