title: React styled-components: refer to other components
body: <p>According to <a href="https://www.styled-components.com/docs/advanced#referring-to-other-components" rel="noreferrer">styled-components doc's</a> I can refer to another component to trigger, for example, a hover effect.</p>
  
  <pre><code>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 &amp; {
          background-color: greenyellow;
          color: black;
      }
  `;
  
  class Hello extends React.Component{
    render() {
      return(
        &lt;div&gt;
          &lt;Link&gt;Hello World&lt;/Link&gt;
          &lt;Link2&gt;Hello Again&lt;/Link2&gt;
        &lt;/div&gt;
      )
    }
  }
  </code></pre>
  
  <p>Basically, hovering mouse on my <code>&lt;Link&gt;</code> should trigger a change in <code>background-color</code> in <code>&lt;Link2&gt;</code>.</p>
  
  <p>This is not happening. Any ideas why?</p>
  
  <p>I prepared a code snippet here: <a href="https://codesandbox.io/s/qv34lox494" rel="noreferrer">https://codesandbox.io/s/qv34lox494</a> </p>