modify a child class using the parent pseudo class in React-JSS

Question

I was trying to modify class attribute of a child element when the parent element is hovered.

Here is one of my attempts at the solution.

const useStyles = makeStyles((theme) => ({
  parent: {
    "&:hover child": {
      marginLeft: '0px'
    },
  child: {
    marginLeft: '-99px'
  }
})

Answer 1

Reference a class name with a $ like so:

const styles = {
  parent: {
    '&:hover $child_class_name': {
       marginLeft: '0px'
    },
  child_class_name: {
    marginLeft: '-99px'
  }
}