Styled-Components: 在 parents 悬停时指定 children 的样式

Question

我有一个简单的组件 这是它的 2 个版本 - 有和没有 styled-components:

没有样式化组件

<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

尝试：

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>

Answer 2

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

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

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

This is copy and pasted from my answer .