更改材质 ui 复选框的边框颜色

Question

这是我选中时的复选框：

这是我未选中时的复选框：

所有与复选框样式相关的帖子都涉及填充颜色、检查颜色等。我一定在这里遗漏了一些明显的东西 - 只是想让边框变暗！

我的代码：

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

Answer 1

粉色是边框的颜色

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