Styles-Components: Specify the styles of the children on the parent pair
I have a simple component.Here are two versions of it - with and without styled components:
No styled components
<div id="container">
<div id="kid"></div>
</div>
#container {
width: 100px;
height: 100px;
}
#kid {
width: 20px;
height: 20px;
}
#container:hover #kid{
background: green;
}
Using styled components
const Container = styled.div`
width: 100px;
height: 100px;
`;
const Kid = styled.div`
width: 20px;
height: 20px;
`;
<Container>
<Kid />
</Container
How can I implement the same behavior with the previous example?
+3
source to share
2 answers
As with style-v2, you can interpolate other styled components to reference their auto-generated class names. In your case, you probably want to do something like this:
const Container = styled.div`
&:hover ${Kid} {
display: none;
}
`
See the documentation for details .
This is a copy and paste from my answer here .
+8
source to share