mui 日期选择器图标已更改但未单击

Question

我已将图标合并到 Material-UI (MUI) 框架的 Datepicker 内的槽参数中，以便对其进行修改。

此添加已成功实施。然而，由于单击附加图标或输入字段时日期选择器无法显示，因此出现了挑战。

我该如何解决和纠正这种情况？

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

Answer 1

您必须将

openPickerButton

的 props 传递给您的自定义元素：

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