Material-UI checkbox backrground color

Question

I am using material ui checkbox, i wanted it to have its own background color over my div which has colored background. I have set the root to have a backgroundColor as white but the svgicon is a round shape which is not the look i intend to have. Can i shape the checkbox ?

Already have tried many things but not able to figure out how to change the icon

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>

The background white is making a spherical rounded checkbox apparent

Image of what is happening now

What color do you want the checkbox to be? Do you want it to be white? You'd need to the set the backgroundColor/background of the checkbox to match the background of the wrapping div/element. codesandbox.io/embed/material-demo-rp2wu — Alexander Staroselsky

Donovan Hiland Donovan Hiland · Accepted Answer · 2019-05-30T22:06:49

You can override the icons used for the checked and unchecked states. The props you're looking for are icon for the unchecked state and checkedIcon for the checked state. Both of which take a component to be used as the icon.

Documentation here

Material-UI checkbox backrground color

2 Answers