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

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

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

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

有关详细信息，请参阅the documentation！

  

这是我的回答here的复制和粘贴。

Answer 2

尝试：

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>