How to style Fluent UI checkbox?

Question

I need to style Fluent UI checkbox and change checkmark color while it is in indeterminate state. I use Flueint UI 8.x.

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

I was able to style everything except indeterminate state, please suggest.

Here is my style object:

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',
    },
};

Checkbox:

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>
        );
    }
}

Answer 1

You need to modify checkbox styles with pseudo :after inside it:

<Checkbox
  ...
  styles={{
    checkbox: {
      selectors: {
        ':after': {
          borderColor: '#f00',
        }
      }
    }
  }}
/>

Codepen working example.