我有一个简单的组件
这是它的2个版本 – 有和没有样式组件：
这是它的2个版本 – 有和没有样式组件：
没有样式组件
<div id="container">
<div id="kid"></div>
</div>
#container {
width: 100px;
height: 100px;
}
#kid {
width: 20px;
height: 20px;
}
#container:hover #kid{
background: green;
}
使用样式组件
const Container = styled.div`
width: 100px;
height: 100px;
`;
const Kid = styled.div`
width: 20px;
height: 20px;
`;
<Container>
<Kid />
</Container
如何在上一个示例中的悬停行为上实现相同的功能？
解决方法
从样式组件v2开始,您可以插入其他样式组件以引用其自动生成的类名.在你的情况下,你可能想要做这样的事情：
const Container = styled.div`
&:hover ${Kid} {
display: none;
}
`
有关更多信息,请参见the documentation！
This is copy and pasted from my answer 07001.
