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

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

从样式组件v2开始,您可以插入其他样式组件以引用其自动生成的类名.在你的情况下,你可能想要做这样的事情:

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

有关更多信息,请参阅文档!

组件的顺序很重要.它仅在Button上面/之前定义时才有效Wrapper.

如果您正在使用v1并且需要执行此操作,则可以使用自定义类名解决此问题:

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开始.

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

Answer 3

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

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

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

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

Answer 4

我的解决方案是

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

Answer 5

这对我有用

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