使用MUI X <DatePicker>时遇renderInput属性不存在TS错误

问题描述 #

使用MUI X的<DatePicker>组件时，以下写法在视频及沙箱示例中可正常运行，但触发TypeScript错误：

代码示例 #

<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)

解决方法 #

这个问题核心是MUI X版本差异导致的：

• MUI X v6及以后版本重构了组件架构，DatePicker不再支持renderInput属性，改用子元素插槽或slots配置的方式关联输入框。
• 旧版（v5及之前）的DatePicker确实支持renderInput，但新版做了调整。

v6+版本的正确写法 #

方式一：通过子元素自定义输入框

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

方式二：使用slots快速关联

如果不需要自定义输入框的额外属性，可直接用slots配置：

<DatePicker
  label="Basic example"
  value={selectedDate}
  onChange={(newValue) => setSelectedDate(newValue)}
  slots={{ textField: TextField }}
/>

版本排查 #

检查package.json中的@mui/x-date-pickers版本：

• 若为v6+，直接用上述新写法；
• 若为v5及以下，确认导入路径正确（需从@mui/x-date-pickers/DatePicker导入），若仍报错，可尝试重新安装依赖以同步类型定义。

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