从 MUI X 使用 <DatePicker> 时出现 renderInput 错误

Question

我正在将以下内容用于 <DatePicker>。看了很多视频和沙盒，效果很好。

不知道为什么我在 renderInput 上收到以下错误

<DatePicker
        label="Basic example"
        value={selectedDate}
        onChange={(newValue) => { setSelectedDate(newValue) }}
        renderInput={(props) => <TextField {...props} />}
      />

Type '{ label: string; value: Date; onChange: (newValue: Date) => void; renderInput: (props: any) => Element; }' is not assignable to type 'IntrinsicAttributes & DatePickerProps<Date> & RefAttributes<HTMLDivElement>'.
  Property 'renderInput' does not exist on type 'IntrinsicAttributes & DatePickerProps<Date> & RefAttributes<HTMLDivElement>'.ts(2322)

Answer 1

您使用的是哪个版本的 MUI X？

我没有看到APIrenderInput上列出的道具<DatePicker>： https ://mui.com/x/api/date-pickers/date-picker/

看起来在最新版本中，slots应该使用 prop 来自定义内部 HTML 组件：https://mui.com/x/api/date-pickers/date-picker/#slots

请参阅此处了解更多信息：https://mui.com/x/react-date-pickers/custom-components/#overriding-components

具体来说，该TextField组件可能是您要定位的组件。

请注意，还有一个slotProps道具：

<DatePicker
  {...otherProps}
  slots={{
    // Override default <ActionBar /> with a custom one
    actionBar: CustomActionBar,
  }}
  slotProps={{
    // pass props `actions={['clear']}` to the actionBar slot
    actionBar: { actions: ['clear'] },
  }}
/>

如果这不能让您到达目的地，除了您的 MUI 版本之外，您能否分享显示您引用的工作示例的沙箱？