Изменить цвет невыбранного флажка с помощью пользовательского интерфейса материала?

Question

Компонент Checkbox принимает свойства color, которые меняют свой внешний вид при выборе, но не когда он не выбран. https://material-ui.com/api/checkbox/

    <Checkbox color="default" />
    <Checkbox color="primary" />
    <Checkbox color="secondary" />

Как изменить цвет невыделенного значка ?

Answer 1

Укажите альтернативные значки, а затем используйте свойство htmlColor.

import CheckBoxIcon from '@material-ui/icons/CheckBox';
import CheckBoxOutlineBlankIcon from '@material-ui/icons/CheckBoxOutlineBlank';
import Checkbox from '@material-ui/core/Checkbox';

...

<Checkbox                                  
  icon={<CheckBoxOutlineBlankIcon  htmlColor="black" />}
  checkedIcon={<CheckBoxIcon htmlColor="black" />}  
/>