迁移至@mui/x-date-pickers v7后，如何为DateTimeField添加endAdornment按钮？

将@mui/x-date-pickers从v6升级到v7后，DateTimeField组件因TypeScript报错无法正常工作。v6中可通过slotProps.textField.InputProps.endAdornment添加自定义按钮打开日历，但v7中该写法触发TypeScript错误。

原代码（v6可行，v7报错） #

<DateTimeField
  className={classes.dateTimeField}
  value={value}
  onChange={handleDateTimeFieldChange}
  format={DATE_FORMAT}
  slotProps={{
    textField: {
      error: Boolean(errorMessage),
      InputProps: {
        endAdornment: (
          <IconButton
            className={classes.openCalendarButton}
            onClick={handleOpenCalendar}
            title="Open calendar"
            size="small"
          >
            <CalendarWithClockIcon />
          </IconButton>
        ),
      },
    },
  }}
/>

TypeScript错误信息 #

Type '{ className: string; value: Dayjs; onChange: (newDate: Dayjs) => void; format: string; slotProps: { textField: { error: boolean; InputProps: { endAdornment: Element; }; }; }; }' 
is not assignable to type 'Omit<Omit<FilledTextFieldProps | OutlinedTextFieldProps | StandardTextFieldProps, "select" | "type" | ... 7 more ... | "SelectProps">, keyof UseDateTimeFieldProps<...>>'.
  Types of property 'slotProps' are incompatible.
    Type '{ textField: { error: boolean; InputProps: { endAdornment: React.JSX.Element; }; }; }' 
    is not assignable to type '{ input?: SlotProps<ElementType<FilledInputProps, keyof IntrinsicElements>, {}, BaseTextFieldProps> | undefined; inputLabel?: SlotProps<...> | undefined; htmlInput?: SlotProps<...> | undefined; formHelperText?: SlotProps<...> | undefined; select?: SlotProps<...> | undefined; } | { ...; } | { ...; } | undefined'.ts(2322)

解决方法：调整slotProps结构 #

MUI X v7重构了日期选择器的slot层级，不再通过textField嵌套传递InputProps，而是直接将输入框相关配置放在slotProps.input中。同时，error属性需要直接提升到DateTimeField的顶层props中，而非嵌套在slotProps里。

修改后的代码：

<DateTimeField
  className={classes.dateTimeField}
  value={value}
  onChange={handleDateTimeFieldChange}
  format={DATE_FORMAT}
  error={Boolean(errorMessage)} // 直接传递error属性
  slotProps={{
    input: {
      endAdornment: (
        <IconButton
          className={classes.openCalendarButton}
          onClick={handleOpenCalendar}
          title="Open calendar"
          size="small"
        >
          <CalendarWithClockIcon />
        </IconButton>
      ),
    },
  }}
/>

关键变化说明 #

• error属性：从slotProps.textField.error移到DateTimeField的顶层props，v7中日期选择器的错误状态由组件本身统一管理，无需通过textField子组件传递。
• endAdornment：从slotProps.textField.InputProps.endAdornment移到slotProps.input.endAdornment，v7将输入框拆分为独立的input slot，直接配置其props即可。

内容的提问来源于stack exchange，提问作者Калдар Кайрат