I need to style a fluent UI checkbox using the style props. However based on the documentation it is unclear how to style the checkbox differently in its checked vs unchecked state. I am able to set the background color to black in the example below, but don't see any change in background color when an item is selected.
const dropdownStyles = {
dropdown: {
width: '300px',
color: 'white',
backgroundColor: '#333333',
borderWidth: '1px',
borderColor: 'black',
borderStyle: 'solid',
},
title: {
backgroundColor: '#333333',
color: 'white'
},
dropdownItem: {
backgroundColor: '#333333',
color: 'white'
},
dropdownItemSelected: {
backgroundColor: '#333333',
color: 'white',
'.ms-Checkbox-checkbox': {
backgroundColor: 'red'
}
},
dropdownItemDisabled: {
backgroundColor: '#333333',
color: 'gray'
},
dropdownItemHeader: {
backgroundColor: '#333333',
color: 'white'
},
dropdownItemsWrapper: {
backgroundColor: '#333333'
},
dropdownOptionText: {
color: 'white'
},
subComponentStyles: {
multiSelectItem: {
root: {
selectors: {
'.ms-Checkbox-checkmark': {
color: 'white',
},
'.ms-Checkbox-checkbox': {
borderColor: 'black',
backgroundColor: 'black',
'& .dropdownItemSelected': {
backgroundColor: 'yellow'
}
}
},
}
}
}
};Results in below 
Additionally, how would I be able to change the hover color to not be blue? Thank you
