Как изменить стиль в mui checkbox на противоположный?

Question

Есть простой компонент Checkbox с атрибутом color="primary" по умолчанию, этот атрибут добавляет цвет к фону флажка, а сам флажок прозрачный, как можно сделать наоборот? Вот пример как есть:

а хотел бы получить что то подобное:

Пример первого варианта:

https://codesandbox.io/s/quizzical-dubinsky-s3tw84?file=/src/App.js

Answer 1

<Checkbox 
  icon={<CheckBoxOutlineBlankTwoTone color='warning' />}
  сheckedIcon={<CheckBoxTwoTone />}
/>

смысл в том что для CheckBox MUI нет стилей, поэтому берете иконки тут https://mui.com/material-ui/material-icons/?query=CheckBox&theme=Two+tone и раскрашиваете в нужный color взяв его тут https://mui.com/material-ui/customization/palette/ к примеру Т.о. в непомеченном состоянии у вас иконка CheckBoxOutlineBlankTwoTone, в помеченном CheckBoxTwoTone Ну и цветом раскрасите в нужный

БЛОГ НА HUSL

Как изменить стиль в mui checkbox на противоположный?

Ответы (1 шт):