如何在迁移到 @mui/x-date-pickers v7之后，在datetimefield中添加Zondornment按钮？

Question

@mui/x-date-pickers

v6升级为V7，而我的dateTimeField组件由于输入错误而停止工作。 INV6，我能够添加一个自定义按钮以使用

slotprops.textfield.inputprops

内部使用endadornment打开日历，但是在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>
        ),
      },
    },
  }}
/>

该代码在V6中工作正常，但现在导致V7中的以下打字稿错误：

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)

我尝试了不同的方法，但我找不到一个简单的解决方案。 问题：

在 @mui/x-date-pickers v7中，在datetimefield中添加endadornment按钮的正确方法是什么？

任何帮助将不胜感激！

ININ

@mui/x-date-pickersv7

，the top被弃用。您可以使用

slotProps.textField.InputProps

Answer 1

slots.textfield 这是结果👇