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

从 styled-components 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>