如何使 MUI 5 復選框和標簽在懸停時更改顏色？

Question

我想在包裝器中有一個帶有標簽的復選框。 當包裝器懸停時，所有東西都應該改變顏色。 看圖片：

這是我的代碼：

const styles = {formControlLabel:{
  color:'#d7dae0',
  border: '1px solid white',
  span: {
    color: '#d7dae0', 
    '&:hover':{border: '1px solid red'},
  }
},
}}

export function MyCheckbox(){
  return(
    <FormControlLabel
      control={<Checkbox />}
      label={'test'}
      sx={styles.formControlLabel}
    />
  )
}

我嘗試了很多不同的東西，但這是我最接近的。 我似乎無法在頂層的 formControlLabel 樣式上放置一個'&:hover' - 它必須嵌入到另一個元素中。 這是為什么？

沙盒： https ://codesandbox.io/s/magical-feynman-lzy1e2?file=/src/App.tsx

Answer 1

您需要將您的:hover更改為您的父項並在父項中設置borderColor並在:hover父項中具有span ，它將同時變為紅色

這是一個沙盒

const styles = {
  formControlLabel: {
    border: "1px solid",
    p: "8px",
    m: "20px",
    "&:hover": {
      borderColor: "red",
      span: {
          color: "red"
      },
    }
  }
};