如何让Tab键跳过MUI Time Picker组件内的图标？

我太懂这种键盘操作时的烦躁了——填完时间按Tab，居然先跳到那个时钟图标上，得多按一次才能到下一个字段，完全拖慢了效率！别担心，咱们用个简单的配置就能解决这个问题。

MUI的TimePicker其实提供了通过slotProps定制内部元素的能力，咱们只需要给那个时钟按钮设置tabIndex=-1，就能让Tab键直接跳过它。具体代码这么写：

<TimePicker
  label="Basic time picker"
  slotProps={{
    openPickerButton: {
      tabIndex: -1,
    },
  }}
/>

这里给你拆解下逻辑：

• tabIndex=-1 表示这个元素不会被Tab键的聚焦序列包含，但仍然可以通过鼠标点击或者编程方式触发，完美契合你的需求——鼠标用户能正常点图标打开选择器，键盘用户按Tab直接跳到下一个输入框。
• 这种设置也不会破坏可访问性，屏幕阅读器依然能识别到这个按钮的存在，只是不会让它成为Tab聚焦的目标。

如果你的MUI版本比较早（比如v5初期），可能slotProps里的键名不是openPickerButton，而是toggleButton，你可以去对应版本的API文档里确认下内部按钮的slot名称，替换成对应的就行。

内容来源于stack exchange