Change border color of material ui checkbox

Viewed 3267

Here is my checkbox when checked:

enter image description here

Here is my checkbox when not checked:

enter image description here

All of the posts relating to styling the checkbox pertain to the fill color, the check color, etc. I must be missing something obvious here - just trying to make the border dark!

My code:

<Grid item xs={12}>
  <FormControlLabel control={<Checkbox onChange={(event) => {
    console.log(event.target.checked)
    setValue('isParty', false)
  }} />} label="Party" />
</Grid>
1 Answers

pink is the color of border

     <Checkbox 
                 sx={{
                      color: "pink",
                      '&.Mui-checked': {
                      color: "red",
                       },
                     }}
     />

enter image description here

enter image description here

Related