CODEWITHSUNDEEP
typescriptmaterial-uireact-typescriptreact-datepickermui-x-date-picker
Meruthiga Ravichandran
Meruthiga Ravichandran

Reputation: 13

In a react typescript code, i am getting ts 2322

import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { DatePicker } from '@mui/x-date-pickers/DatePicker';

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

This is my code. I'm getting the below error in renderInput line.

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)

Please help me to resolve it

Why is this error coming and how to solve it?

Upvotes: 0

Views: 107

Answers (1)

Den
Den

Reputation: 89

renderInput is not present in MUI API since v5: https://mui.com/x/react-date-pickers/date-picker/

You have to use textField from Slots https://mui.com/x/api/date-pickers/date-picker/#slots. For example:

<DatePicker
  {...props}
  slots={{
    textField: params => <CustomTextField {...params} />
  }}
/>

Upvotes: 1

Related Questions