将另一个样式化的组件作为悬停目标

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

我可以在组件上实现一些状态，并在鼠标悬停上切换一个属性，但我想知道是否有更好的方法来处理样式化组件。

下面这样的方法不起作用，但却是最理想的:

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;
}
}
`
206273 次浏览
小开
最佳答案

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

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

有关更多信息，请参见 文件！

组件的顺序很重要。只有在 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进行的插入式升级，所以我建议进行更新，但如果没有这个打算，这是一个很好的解决方案。

小开

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

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

我不能告诉您这个特性是什么时候引入的，但是它可以在 v3中工作。

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

小开

我的解决办法是

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

这个方法对我很有效:

const ContentB = styled.span`
opacity: 0;


&:hover {
opacity: 1;
}
`


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

我就是这么做的

const NoHoverLine = styled.div`
a {
&:hover {
text-decoration: none;
}
}
`
小开 
const ConnectButton = styled(WalletDialogButton)`
background-color: #105b72;
border: none;
margin: 10vh auto;
width: 250px;


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

就像 Marcos 说的，我用 styled ()代替 styled.something

我不知道为什么，但是我引用了存在 WalletDialogButton的 node _ module 包。

小开

如果您正在使用 MUI

下面是一个代码示例:

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

将子类应用于要影响 onhover 的组件


提交答案