将鼠标悬停在另一个样式化的组件上

reactjs React.js

十三LEY

2020-03-16

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

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

第1800篇《将鼠标悬停在另一个样式化的组件上》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共3个回答
Itachi蛋蛋 2020.03.16

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

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

我无法告诉您何时引入了此功能，但自v3起可以使用。

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

神奇小小伽罗 2020.03.16

对我来说解决方案是...

   const Content = styled.div`

  &:hover + ${ImgPortal} {
    &:after {
      opacity: 1;
    }
  }
`;
神无LEYMandy 2020.03.16

从样式组件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的直接升级，因此我建议您进行更新，但是如果不在此范围内，这是一个很好的解决方法。

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android