Change Styled Component via Parent state
[Styled Components](https://www.styled-components.com/) 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.
``` jsx
```
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`.
``` js
const Thing = styled.div`
color: blue;
`
```
``` js
const Parent = styled.div`
&:hover {
${Thing} {
color: red
}
}
`
```
chriserin
July 20, 2018