React styled-components：参考其他组件答案

【问题标题】：React styled-components: refer to other componentsReact styled-components：参考其他组件
【发布时间】：2018-02-01 03:14:19
【问题描述】：

根据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> 中的变化。

这不会发生。任何想法为什么？

我这里准备了一个代码sn-p：https://codesandbox.io/s/qv34lox494

【问题讨论】：

标签： reactjs styled-components

【解决方案1】：

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

查看文档中的引用：

这里，我们的 Icon 组件定义了它对 parent Link 的响应悬停

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

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

https://codesandbox.io/s/mo7kny3lmx

【讨论】：

【解决方案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>
    )
  }
}

【讨论】：