根据样式化组件文档，我可以引用另一个组件来触发，例如，悬停效果。
const Link = styled.a`
display: flex;
align-items: center;
padding: 5px 10px;
background: papayawhip;
color: palevioletred;
`;
const Link2 = styled.a`
display: flex;
align-items: center;
padding: 5px 10px;
background: steelblue;
color: white;
${Link}:hover & {
background-color: greenyellow;
color: black;
}
`;
class Hello extends React.Component{
render() {
return(
<div>
<Link>Hello World</Link>
<Link2>Hello Again</Link2>
</div>
)
}
}
基本上，我的鼠标悬停<Link>应触发改变background-color的<Link2>。
这没有发生。有什么想法吗？
我在这里准备了一个代码片段：https : //codesandbox.io/s/qv34lox494
您可以引用样式化组件，它们是样式化组件的子项，而不是并行的。
请参阅文档中的报价：
在这里，我们的Icon组件定义了其对悬停其父Link的响应
对于您的问题，可以为两个链接创建一个包装器，并在CSS中使用相邻的兄弟选择器，如下所示：
const Wrapper = styled.div`
& ${Link}:hover + ${Link2} {
background-color: greenyellow;
color: black;
}
`;
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句