在悬停状态下瞄准另一个样式组件

Question

处理样式组件中悬停的最佳方法是什么？我有一个包装元素，当悬停时会显示一个按钮。

我可以在组件上实现一些状态，并在悬停状态下切换属性，但我想知道是否有更好的方法使用样式化的cmponents来实现这一点。

类似于以下内容的内容不起作用，但非常理想：

const Wrapper = styled.div`
  border-radius: 0.25rem;
  overflow: hidden;
  box-shadow: 0 3px 10px -3px rgba(0, 0, 0, 0.25);
  &:not(:last-child) {
    margin-bottom: 2rem;
  }
  &:hover {
    .button {
      display: none;
    }
  }
`

Answer 1

我的解决办法是

const Content = styled.div`
  &:hover + ${ImgPortal} {
    &:after {
      opacity: 1;
    }
  }
`;

Answer 2

与mxstbr的答案类似，您也可以使用内插来引用父组件。我喜欢这个路由，因为它封装了组件的样式，比在父组件中引用子组件好一点。

const Button = styled.button`
  ${Wrapper}:hover & {
    display: none;
  }
`;

我不能告诉你这个特性是什么时候引入的，但是从v3开始就可以使用了。

相关链接：https://www.styled-components.com/docs/advanced#referring-连接到其他组件

Answer 3

对于样式化组件v2，您可以插入其他样式化组件以引用其自动生成的类名。在您的情况下，您可能希望执行以下操作：

const Wrapper = styled.div`
  &:hover ${Button} {
    display: none;
  }
`

有关更多信息，请参阅文档！

组件的顺序很重要。只有在包装器前面/上面定义了按钮时，它才会工作。

如果您使用的是v1，并且需要执行此操作，则可以使用自定义类名来解决此问题：

const Wrapper = styled.div`
  &:hover .my__unique__button__class-asdf123 {
    display: none;
  }
`

<Wrapper>
  <Button className="my__unique__button__class-asdf123" />
</Wrapper>

由于v2是从v1到v1的直接升级，我建议进行更新，但如果卡中没有更新，这是一个很好的解决方法。