I have a React application using Fluent UI. Currently, the <Checkbox/> component is displaying with its default colors and behavior like this:
https://i.sstatic.net/ZSL7I.png
I want to customize the color of the checked mark and label (Green for checked mark and brown for label). I attempted the following code to achieve this but it did not work.
const checkBoxStyles = {
root: {
color: 'brown'
},
checkbox: {
color:'green'
}
}
return (
<Stack tokens={stackTokens}>
<Checkbox
styles={checkBoxStyles}
label="Controlled checkbox"
checked={isChecked}
onChange={onChange}
/>
</Stack>
);
For the complete working code snippet, visit CodePen - https://codepen.io/AnkitSaxena2605/pen/eYyppLj