React Fluent UI - Change color of checkbox's checked mark and label

Question

I've a react app using Fluent UI. I'm using <Checkbox/> component but it's having it's default colors and behavious. Like this:

I want to change the color of the checked mark and also the label (Green checked mark and brown lable). I tried the below way to do so but it didn't work.

const checkBoxStyles = {
  root: {
    color: 'brown'
  },
  checkbox: {
    color:'green'
  }
}
  return (
    <Stack tokens={stackTokens}>
      <Checkbox
        styles={checkBoxStyles}
        label="Controlled checkbox"
        checked={isChecked}
        onChange={onChange}
      />
    </Stack>
  );
};

Full working code at codepen - https://codepen.io/AnkitSaxena2605/pen/eYyppLj

Answer 1

Try to do the following changes in your checkBoxStyles:

 const checkBoxStyles = {
    checkmark: {
      background: 'green',
      color: 'white'
    },
    checkbox: {
      background: 'white',
      borderColor: 'black'
    },
    text: {
      fontWeight: "bold",
      color:'brown'
    }
  };

checkbox and checkmark are for styling the checkbox and text is for styling the label.