reactjs - React 样式组件 : refer to other components

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

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

查看文档中的引用:

Here, our Icon component defines its response to its parent Link being hovered

对于您的问题，您可以为两个链接创建一个包装器，并使用 adjacent sibling selector在CSS中像这样:

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

https://codesandbox.io/s/mo7kny3lmx