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
kurumkan
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
mxstbr
source
to share
try:
const Container = styled.div`
width: 100px;
height: 100px;
&:hover #kid {
background: green;
}
`;
const Kid = styled.div`
width: 20px;
height: 20px;
`;
<Container>
<Kid id="kid" />
</Container>
0
Tom berghuis
source
to share