css - Styled-Components:在 parent 悬停时指定 child 的风格

Question

我有一个简单的组件 这是它的 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

如何实现与上一个示例相同的悬停行为？

Answer 1

从 styled-components v2 开始，您可以插入其他样式组件以引用它们自动生成的类名。在你的情况下，你可能想要做这样的事情:

const Container = styled.div`
  &:hover ${Kid} {
    display: none;
  }
`

参见 the documentation获取更多信息!

This is copy and pasted from my answer here.