javascript - 有没有办法修改从 material-ui 生成的 <span> 标签？

Question

有没有办法修改 <span>使用 Checkbox 生成的标记来自 material-ui 的组件框架？

基本上，我正在寻找一种改变的方法:

<span class="MuiButtonBase-root-29 MuiIconButton-root-226 MuiSwitchBase-root-277 MuiCheckbox-root-271 Checkbox-root-265 MuiCheckbox-colorSecondary-276">
  <span class="MuiIconButton-label-231">
    <svg class="MuiSvgIcon-root-168" focusable="false" viewBox="0 0 24 24" aria-hidden="true" role="presentation">
      <path d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"></path>
    </svg>
    <input class="MuiSwitchBase-input-280" name="Chk" type="checkbox" data-indeterminate="false" value="">
  </span>
  <span class="MuiTouchRipple-root-64"></span>
</span>

到(更改在第一个 <span> 标记中)

<span class="MuiButtonBase-root-29 MuiIconButton-root-226 MuiSwitchBase-root-277 MuiCheckbox-root-271 Checkbox-root-265 MuiCheckbox-colorSecondary-276" tabindex=0>
  <span class="MuiIconButton-label-231">
    <svg class="MuiSvgIcon-root-168" focusable="false" viewBox="0 0 24 24" aria-hidden="true" role="presentation">
      <path d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"></path>
    </svg>
    <input class="MuiSwitchBase-input-280" name="Chk" type="checkbox" data-indeterminate="false" value="">
  </span>
  <span class="MuiTouchRipple-root-64"></span>
</span>

感谢您的帮助!

Answer 1

documentation for Checkbox声明 “提供的任何其他属性将被传播到根元素( native 元素)”，因此您可以只给组件一个属性 tabindex，其值为 0:

import Checkbox from '@material-ui/core/Checkbox';

function MyCheckbox() {
  return <Checkbox tabindex={0} />;
}