在悬停时定位另一个样式化的组件

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 开始，您可以插入其他样式组件以引用它们自动生成的 class 名称。在你的情况下，你可能想做这样的事情：

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

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

组件的顺序很重要。仅当 Button 定义为 above/before Wrapper.

时才有效

如果您使用的是 v1 并且需要这样做，您可以使用自定义 class 名称来解决它：

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

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

由于 v2 是 v1 的直接升级，因此我建议进行更新，但如果这不在卡片中，这是一个很好的解决方法。

Answer 2

与 mxstbr 的回答类似，您也可以使用插值来引用父组件。我喜欢这条路线，因为它比在父组件中引用子组件更好地封装了组件的样式。

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

我无法告诉您何时引入此功能，但从 v3 开始就可以使用。

相关link：https://www.styled-components.com/docs/advanced#referring-to-other-components

Answer 3

我的解决方案是

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

Answer 4

这个解决方案对我有用：

const ContentB = styled.span`
  opacity: 0;

  &:hover {
    opacity: 1;
  }
`

const ContentA = styled.span`
  &:hover ~ ${ContentB} {
    opacity: 1;
  }
`

Answer 5

这对我有用

const NoHoverLine = styled.div`
  a {
    &:hover {
      text-decoration: none;
    }
  }
`

Answer 6

const ConnectButton = styled(WalletDialogButton)`
  background-color: #105b72;
  border: none;
  margin: 10vh auto;
  width: 250px;

  &:hover {
    background-color: #105b72c2;
  }
  `;

正如 Marcos 所说，这对我有用。我正在使用 styled() 而不是 styled.something

我真的不知道为什么，但我引用了 node_modules 包，其中 WalletDialogButton 存在。

Answer 7

如果您使用的是 MUI

这是一个代码示例：

...
  parentClass: {
    "&:hover $childClass": {
      display: 'flex'
    }
  },
  childClass: {
    position: "absolute",
    right: 5,
    display: 'none'
  },
...

将子项 class 应用于悬停时要影响的组件

在悬停时定位另一个样式化的组件

Target another styled component on hover

reactjs

styled-components