React TypeScript中MUI DatePicker的TS2322错误解决咨询

问题代码 #

import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { DatePicker } from '@mui/x-date-pickers/DatePicker';
import { styled } from '@mui/material/styles';
import TextField, { TextFieldProps } from '@mui/material/TextField';

const CustomTextField = styled(TextField)(({ theme }) => ({
  '& .MuiInputBase-input': {
    padding: '8px',
  },
}));

const MyComponent = () => (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
        <DatePicker
            format='MM/DD/YYYY'
            renderInput={(params: TextFieldProps) => <CustomTextField {...params} />}
        />
    </LocalizationProvider>
);

错误信息 #

Type '{ format: string; renderInput: (params: TextFieldProps) => Element; }' is not assignable to type 'IntrinsicAttributes & DatePickerProps<Dayjs, false> & RefAttributes'.
Property 'renderInput' does not exist on type 'IntrinsicAttributes & DatePickerProps<Dayjs, false> & RefAttributes'.ts(2322)

原因分析 #

MUI X 从v5.0.0-beta.0版本开始重构了日期选择器API，renderInput 属性已被移除，改为通过 slotProps.textField 配置输入组件的渲染逻辑。代码仍使用旧版API，导致TypeScript检测到属性不存在的类型错误。

解决方法 #

将 renderInput 替换为 slotProps.textField，调整输入组件的配置方式：

修改后的完整代码 #

import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { DatePicker } from '@mui/x-date-pickers/DatePicker';
import { styled } from '@mui/material/styles';
import TextField, { TextFieldProps } from '@mui/material/TextField';

const CustomTextField = styled(TextField)(({ theme }) => ({
  '& .MuiInputBase-input': {
    padding: '8px',
  },
}));

const MyComponent = () => (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
        <DatePicker
            format='MM/DD/YYYY'
            slotProps={{
                textField: (params: TextFieldProps) => <CustomTextField {...params} />
            }}
        />
    </LocalizationProvider>
);

补充说明 #

• 确保正确导入 TextFieldProps 类型，避免类型推断错误
• 若需给输入框添加额外属性，可直接在 CustomTextField 上配置，比如 <CustomTextField {...params} label="选择日期" />

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