如何移除MUI MobileTimePicker移动端的键盘输入功能

要彻底禁止MUI移动端时间（或日期）选择器进入文本编辑视图，去掉切换图标并阻断编辑入口，试试这几个方案：

方案1：CSS直接隐藏切换图标 #

最快捷的方式是用CSS把移动端的文本视图切换图标隐藏，让用户根本点不到：

/* 隐藏时间选择器的切换图标 */
.MuiTimePickerToolbar-ampmSelection + .MuiIconButton-root {
  display: none !important;
}

/* 日期选择器同理，隐藏对应切换图标 */
.MuiDatePickerToolbar-actionIcon {
  display: none !important;
}

如果只想针对移动端生效，加个媒体查询：

@media (max-width: 600px) {
  .MuiTimePickerToolbar-ampmSelection + .MuiIconButton-root,
  .MuiDatePickerToolbar-actionIcon {
    display: none;
  }
}

方案2：通过组件Props关闭切换按钮 #

很多MUI版本的时间/日期选择器支持直接通过配置关闭切换按钮，不用写CSS：

import { TimePicker } from '@mui/x-date-pickers/TimePicker';

<TimePicker
  // 直接禁用工具栏的切换按钮
  toolbarProps={{ showToggleButton: false }}
  // 其他必要props
/>

如果是日期选择器，同理设置toolbarProps={{ showToggleButton: false }}即可。

方案3：彻底锁死输入框编辑能力 #

配合禁用输入框的可编辑状态，双重保险防止进入文本模式：

<TimePicker
  renderInput={(params) => (
    <TextField
      {...params}
      inputProps={{
        ...params.inputProps,
        readOnly: true,
        // 阻止输入框获取焦点，从根源切断编辑可能
        onFocus: (e) => e.target.blur()
      }}
    />
  )}
/>

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