Флажок Material-UI цвет фона

Question

Я использую флажок Material UI, я хотел, чтобы он имел свой собственный цвет фона поверх моего div, который имеет цветной фон.Я установил в корне backgroundColor белым цветом, но svgicon имеет круглую форму, и это не тот вид, который я намереваюсь иметь.Могу ли я оформить флажок?

Уже пробовал много вещей, но не смог выяснить, как изменить значок

const styles = {
    root : {
        padding : '0px',
        display : 'inline-block',
        backgroundColor : 'white'
    },
    formLabelRoot : {
        margin : '0'
    }
}
.
.
.
render () {
        const { classes } = this.props
        return(
            <div style={customStyles.divStyle}>
                <div style={customStyles.div1}>
                    <FormControlLabel
                        classes={{root: classes.formLabelRoot}}
                        control={
                            <Checkbox
                                classes={{root : classes.root }}
                                color='primary'
                            />
                            }
                        label={''}
                    />
                </div>

Белый фон делает сферический закругленный флажок видимым

Изображение того, что происходит сейчас

Answer 1

Возможно, вам придется пойти на компромисс, если вы не хотите делать свои собственные иконки. Примерно так можно без смены иконок. Если вы ищете сплошную белую коробку с серым контуром в качестве флажка без флажка, вам, возможно, придется предоставить этот svg самостоятельно, потому что я не вижу ничего подобного в @material-ui/icons.

Если это что-то, с чем вы в порядке, тогда нацельтесь на svg и дайте ему fill: "white".

Answer 2

Вы можете переопределить значки, используемые для отмеченных и непроверенных состояний. Реквизиты, которые вы ищете: icon для непроверенного состояния и checkedIcon для проверенного состояния. Оба из них принимают компонент, который будет использоваться в качестве значка.

Документация здесь