title: change nested component's style based on parent props in styled-components?
body: <p>Let's say I have a wrapper component  that has some other components inside of it:</p>
  
  <pre><code>const Card = styled.div`
      background-color: ${props =&gt; props.selected ? 'green' : 'none'}
  `
  
  &lt;Card&gt;
      &lt;Header&gt;
          &lt;Logo/&gt;
      &lt;/Header&gt;
      &lt;Footer/&gt;
  &lt;/Card&gt;
  </code></pre>
  
  <p>They are all styled components. The card turns green, when I pass <code>selected</code> prop to it. How can I change styles of <code>&lt;Logo&gt;</code> according to that prop, passed to <code>&lt;Card&gt;</code>?</p>
  
  <p>For example, in pure css I did it like this: </p>
  
  <pre class="lang-css prettyprint-override"><code>.card.selected {
      background-color: green;
  }
  
  .card.selected .logo {
      opacity: 1;
  } 
  </code></pre>
  
  <p>What is the best way to replicate this behavior in styled-components? I don't like the idea to pass <code>selected</code> prop to all children of <code>&lt;Card&gt;</code>.</p>