React styled-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> 上应该会触发 <Link2> 中 background-color 的变化。

这不会发生。有什么想法吗？

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

Answer 1

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

请参阅文档中的引述：

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

对于您的问题，您可以为两个链接创建一个包装器，然后像这样在 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 styled-components：引用其他组件

React styled-components: refer to other components

reactjs

styled-components