React CSS hover change all contained elements

If you React and makeStyles and need to change all contained elements on hover of the parent, this might help you:

"&:hover": {
  $cssForParent
  "& > *:hover": {
    $cssForAllChildren
  },
  "& > div:hover": {
    $cssForSpecificChildren
  },
}

For example if you need to change the color of all children in an element on hover (e.g. for a material ui button), use this:

"&:hover": {
  filter: "brightness(97.5%)",
  "& > *:hover": {
    filter: "brightness(97.5%)",
  },
  "& > div:hover": {
    filter: "brightness(97.5%)",
  },
}

This worked really well for me on a project. Let me know if it helps you too.

Best,

Frank