Styled-Components：指定父母悬停时孩子的样式

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

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

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

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

See 文档 https://www.styled-components.com/docs/advanced#referring-to-other-components了解更多信息！

这是从我的答案中复制并粘贴的here https://stackoverflow.com/questions/41007060/best-way-to-handle-hover-in-styled-components-with-react.