title: styled-components, Referring to other components and use its props?
body: <p>How do I make this work?</p>
  
  <p><code>img</code> is passed as <code>&lt;Child /&gt;</code>'s props, and I want to change the child's background-image when <code>&lt;Parent /&gt;</code> is hovered</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;Parent&gt;
    &lt;Child img={'path/to/img.png'}/&gt;
  &lt;/Parent&gt;
  </code></pre>
  
  <pre class="lang-js prettyprint-override"><code>const Child = styled.div`
  
  `;
  
  const Parent = styled.div`
    &amp;:hover {
      ${Child} {
        background-image: url(${props =&gt; props.img});
      }
    }
  `;
  
  </code></pre>