Material-UI复选框背景色

Question

我正在使用材质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>

背景白色使球形的圆形复选框很明显

Image of what is happening now

Answer 1

您可以覆盖用于选中和未选中状态的图标。您要寻找的道具是icon代表未检查状态，checkedIcon代表检查状态。两者都使用一个组件作为图标。

文档here

Answer 2

如果您不想自己制作图标，则可能必须在这里做出让步。 这样的事情无需更改图标就可以实现。如果您要查找带有灰色轮廓的纯白色框作为未选中的框，则可能必须自己提供该svg，因为在@material-ui/icons中看不到任何类似的东西。

如果可以的话，请以svg为目标，并给它一个fill: "white"。