Change Styled Component via Parent state

Styled Components has been changing the way I think about CSS and styling. Including the css in with the component makes sense, you don't have to hunt down styles or wonder what unravels when you start changing styles in a heavily nested scss document.

Today I learned that you can reference styled components in other components to allow parents to change the state of their children.

<Parent>
	<Thing/>
</Parent>

When a user hovers over Thing's parent, I want to change it's color from blue to red. I can do that by interpolating Thing into Parent.

const Thing = styled.div`
  color: blue;
`

const Parent = styled.div`
  &:hover {
  	${Thing} {
      color: red 
    }
  }
`