Есть ли способ изменить тег <span>, созданный из material-ui?

Question

Есть ли способ изменить тег <span>, сгенерированный с помощью компонента Checkbox из material-ui framework?

По сути, я ищу способ изменить:

<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

В документации для 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} />;
}