reactjs - 悬停时定位另一个样式组件

Question

处理样式组件中的悬停的最佳方法是什么。我有一个环绕元素，将其悬停时会显示一个按钮。

我可以在组件上实现一些状态并在悬停时切换属性，但想知道是否有更好的方法可以使用 styled-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

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

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

参见the documentation了解更多信息!

组件的顺序很重要。仅当在 Wrapper 上方/之前定义 Button 时，它才会起作用。

<小时/>

如果您使用的是 v1 并且需要这样做，您可以通过使用自定义类名来解决它:

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

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

由于 v2 是 v1 的直接升级，我建议更新，但如果这不存在，那么这是一个很好的解决方法。