Search code examples
datematerial-uidatepickertsx

mui datepicker icon changed but doesn't click

I have incorporated an icon into the slot parameter within the Datepicker of the Material-UI (MUI) framework in order to modify it.

This addition was successfully implemented. However, a challenge arises as the Datepicker fails to unveil upon clicking either the appended icon or the input field.

How may I address and rectify this circumstance?

<DatePicker
  label="Filled picker"
  slotProps={{ textField: { variant: "filled" } }}
  slots={{ openPickerButton: () => <img src="./icon" /> }}
/>
Solution

  • You have to pass the props of openPickerButton to your custom element:

    DatePicker
  {...otherProps}
  slots={{ openPickerButton: ({ children, ...props }) => <img {...props} src="./icon" /> }}
/>