MUI MobileDatePicker移除铅笔按钮 禁用手动输入仅保留日期选择

问题场景 #

使用MUI MobileDatePicker 组件时，无法移除选择器顶部用于切换视图的铅笔形状编辑按钮，业务需求为仅允许用户通过点选操作选择日期，完全禁止手动输入日期。
效果参考：

原有问题代码 #

<MobileDatePicker
  label="For mobile"
  value={value}
  onChange={(newValue) => {
    setValue(newValue);
  }}
  components={{
    ActionBar: () => <div />,
    OpenPickerIcon: () => <div />
  }}
  renderInput={(params) => <TextField {...params} />}
/>

解决方法 #

原有代码不生效的核心原因是：铅笔形状的编辑切换按钮对应的组件插槽不是OpenPickerIcon，而是独立的SwitchViewButton插槽，补上对应配置再加输入框只读兜底即可：

• 在components配置项中新增SwitchViewButton: () => null，直接将铅笔按钮替换为空节点，实现按钮隐藏
• 在renderInput渲染的TextField上给输入框加readOnly属性，彻底禁止手动输入，同时不会触发移动端输入键盘弹出

修正后的完整代码：

<MobileDatePicker
  label="For mobile"
  value={value}
  onChange={(newValue) => {
    setValue(newValue);
  }}
  components={{
    ActionBar: () => null,
    OpenPickerIcon: () => null,
    // 隐藏铅笔编辑切换按钮
    SwitchViewButton: () => null
  }}
  renderInput={(params) => (
    <TextField
      {...params}
      // 输入框设为只读，兜底禁止手动输入
      inputProps={{ ...params.inputProps, readOnly: true }}
    />
  )}
/>

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