修改MUI DatePicker图标后点击无响应的问题解决方法

问题根源 #

自定义openPickerButton插槽时，直接返回的<img>元素没有绑定原按钮内置的打开面板点击事件，导致点击图标无响应；输入框失效可能是交互逻辑被意外覆盖。

解决方法 #

在自定义图标组件中接收并调用插槽传入的onClick回调，同时确保TextField的默认交互正常：

修改后的代码示例：

<DatePicker
  label="Filled picker"
  slotProps={{ textField: { variant: "filled" } }}
  slots={{ 
    openPickerButton: ({ onClick }) => (
      <img 
        src="./icon" 
        onClick={onClick} 
        style={{ cursor: 'pointer' }} // 可选：添加鼠标指针提示可点击
      />
    ) 
  }}
/>

补充说明 #

• 解构获取插槽传入的onClick函数并绑定到<img>的点击事件，就能触发DatePicker内置的面板打开逻辑。
• 如果输入框仍无响应，检查是否在slotProps.textField中设置了阻止默认行为的属性，或者是否错误控制了DatePicker的open状态（受控模式下）。

内容的提问来源于stack exchange，提问作者Abdullah Çiçekli