7

根据styled-components 文档，我可以参考另一个组件来触发，例如悬停效果。

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>
    )
  }
}

基本上，将鼠标悬停在 my 上应该<Link>会触发.background-color<Link2>

这没有发生。任何想法为什么？

我在这里准备了一个代码片段：https ://codesandbox.io/s/qv34lox494

4

2 回答 2

20

您可以引用样式组件，它们是样式组件的子组件，而不是并排的。

请参阅文档中的引用：

在这里，我们的 Icon 组件定义了它对悬停的父链接的响应

对于您的问题，您可以为两个链接创建一个包装器，并使用CSS 中的相邻兄弟选择器，如下所示：

const Wrapper = styled.div`
    & ${Link}:hover + ${Link2} {
        background-color: greenyellow;
        color: black;
    }
`;

https://codesandbox.io/s/mo7kny3lmx

于 2017-08-23T13:41:21.643 回答
1

另一种方法是修改 Link2 上的选择器以使用兄弟姐妹（现在它是嵌套项目选择器）。在这种情况下，您可以摆脱额外的包装

    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>
    )
  }
}
于 2021-04-22T13:06:19.783 回答