我需要风格流畅的用户界面复选框，并改变复选标记的颜色，而它是在不确定的状态。我使用的是Fluuint UI 8.x。

"dependencies": {
    "react": "16.8.6",
    "@fluentui/react": "8.29.0",
    "react-dom": "16.8.6"
  }

我可以风格的一切，除了不确定的状态，请建议。
下面是我的样式对象：

const checkboxStyles: Partial<ICheckboxStyles> = {
    checkbox: {
        backgroundColor: 'white',
        borderColor: '#304a3d',
        borderRadius: '0px',
        borderWidth: '1.2px',
        selectors: {
            ':checked:hover': {
                backgroundColor: '#f5f1ed',
            },
        },
    },
    checkmark: {
        color: '#05a58a',
        borderColor: 'yellow',
        selectors: {
            ':indeterminate': {
                color: 'red',
                borderColor: 'red',
                backgroundColor: 'red',
            }
        },
    },
    text: {
        fontSize: '14px',
        font: 'Arial',
    },
};

复选框：

export class CheckBoxControl extends React.Component<ICheckboxProps> {
    public render(): React.ReactNode {
        return (
            <div>
                <Checkbox
                    defaultChecked={this.props.defaultChecked}
                    defaultIndeterminate={this.props.indeterminate}
                    label={this.props.label}
                    onChange={(ev, checked) => {
                        this.props.onChange(checked ? 1 : 0);
                    }}
                    styles={checkboxStyles}
                />
            </div>
        );
    }
}