Why is nested selector checked in JSS not picking up the checked state?

Question

Trying to build an image radio button in a Material UI React project by adapting this css to jss:

https://codepen.io/oraculodaweb/pen/xJdbqM

Here is my attempt so far:

const radioStyle = {
  radioImage: {
    width: "60px",
    padding: "0px",
    backgroundColor: "white",
    boxShadow: "0px 15px 30px 0px rgba(16,146,147,0.12)",
    borderRadius: "5px",
    transitionDuration: ".2s",
    opacity: 0.6,
    cursor: "pointer",
    "&:hover": {
      transform: "scale(1.1)",
    },
  },
  radioHidden: {
    position: "absolute",
    visibility: "hidden",
    "&:checked": {
      "& ~ $radioImage": {
        opacity: 1,
        transform: "scale(1.5)",
       },
    },

  },
};

The relevant code in the component:

<FormControlLabel
                value="Applicant"
                control={<Radio className={classes.radioHidden} />}
                label={
                  <Box component="div" fontSize="1.5rem">
                    <img src="https://i.imgur.com/qgdSTFZ.png" className={classes.radioImage}></img>
                    You
                  </Box>
                }
              ></FormControlLabel>

When clicking on the image, it's not behaving as the css would suggest. Just hover responds, checked is being completely ignored (no changes in scale or opacity). What might be going wrong here?

Answer 1

It has no effect because of these elements with classes which you are passing placed not on the same level of selectors. And even if it will be on the same level it will not work, as you use :checked not to input element, it's span in your case, you easily can inspect it.

If you just need to add a special icon for checked/unchecked you can use checkedIcon & icon props. More info here