如何更改 Material-UI 按钮的 tabIndex？

编程问答 2022-05-29

问题描述

我在我的一个 ReactJS 项目中使用了 Material-UI。 我有几个按钮：一些 - 主要，其余的是次要。我想要实现的是禁用 secondary 按钮上的 tabIndex 属性，只保留键盘选项卡可访问的 primary 按钮。

事实证明为 Button 组件设置 tabIndex 属性不起作用，也不能通过 inputProps 设置 tabIndex：

<Button
  variant="contained"
  tabIndex="-1"  //does not work
  size="small"
  startIcon={SearchIcon}
  color='secondary'
  inputProps={{ tabIndex: "-1" }}  //does not work either
 > some text
</Button>

如何通过键盘选项卡禁用辅助按钮的辅助功能？ 我无法通过 CSS 为元素设置 tabindex 属性，可以吗？

任何帮助将不胜感激。 谢谢。

解决方法

对于文本框和输入，你必须像这样编码

      <TextField label="1" inputProps={{ tabIndex: "1" }} />

对于按钮，你的代码必须是这样的

      <Button tabIndex="2">Button 2</Button>
buttonbuttonbuttonmaterial-uireactjsreactjsreactjsreactjstabindextabindex