Question

根据styled-components doc's我可以引用另一个组件来触发，例如，悬停效果。

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

Answer 1

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

请参阅doc：

中的引用

在这里，我们的Icon组件定义了对其父链接的响应盘旋

对于您的问题，您可以为两个链接创建一个包装器，并使用CSS中的adjacent sibling selector，如下所示：

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

https://codesandbox.io/s/mo7kny3lmx

Answer 2

另一种方法是修改 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>
    )
  }
}

React样式组件：参考其他组件

2 个答案: