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指出"Any other properties supplied will be spread to the root element (native element)"，因此您只需为组件提供一个道具tabindex，其值为0：

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

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

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

1 个答案: