Styled-Components：在父鼠标悬停时指定子元素的样式

Posted 2023-03-15

【中文标题】Styled-Components：在父鼠标悬停时指定子元素的样式

【英文标题】：Styled-Components: specify styles of children on parents hover

【发布时间】：2017-12-15 14:59:16

【问题描述】：

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

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

【问题讨论】：

Best way to handle hover in styled-components with react的可能重复

可能重复

【参考方案1】：

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

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

更多信息请见the documentation！

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

【讨论】：

我正在通过文档和项目的问题寻找这个。它不应该是 styledcomponents 基本或高级部分而不是常见问题的一部分吗？感谢您的出色工作。

【参考方案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>

【讨论】：

谢谢！但是我在使用样式化组件时删除了所有 id 和类

试试 &:hover > * 背景：绿色；

谢谢。你在通过 fcc 吗？

@ArslArsl 是的，你可以在我的 github 上看到我完成的项目

这看起来不像是正确的解决方案。 ID 不能与组件一起使用 - 在 DOM 中只能有一个唯一的。并且使用 * 将针对所有元素，因此一旦您更改结构，例如。在中间再添加一个 div，它将停止工作 - 所以最好专门针对 Kid - 就像上面的答案一样。