1-Problem.md

We have two components, parent and child. When user hovers over the parent we want to change an attribute on the child. We achieve this we are using a global class in the child so the parent can select it. But this breaks the modularity of css modules.

Is there a way to solve this in a nicer way without using global?

2-Parent.js

import styles from './Parent.js'

<Parent className={styles.root}>
  ...
  <Child />
</Parent>

3-Parent.css

.root {
}

// on hover we want to change the bg of child
// we are using global for this
.root:hover :global(.childComponent){
  background-color: red;
}

4-Child.js

import styles from './Child.css'

<Child className={`${styles.root} childComponent`}>
  ...
</Child>

5-Child.css

.root {
  background-color: yellow;
}