title: How to access child's props from parent's styled-component?
body: <p>I have kind of this construction:</p>
  
  <pre><code>  &lt;Wrapper activeTextColor="red"&gt;
      &lt;Text active={true}&gt;Text 1&lt;/Text&gt;
      &lt;Text active={false}&gt;Text 2&lt;/Text&gt;
    &lt;/Wrapper&gt;
  </code></pre>
  
  <p>Styled-components should look like this:</p>
  
  <pre><code>const Text = styled.p``;
  
  const Wrapper = styled.div`
    ${Text} {
      ${props =&gt;
        props.activeTextColor &amp;&amp;
        css`
          /* How to make color red based on "active" attribute of Text element? */
        `}
    }
  `;
  </code></pre>
  
  <p>How to access child's props from parent's styled-component here? </p>
  
  <p>Here is a <a href="https://codesandbox.io/s/adoring-water-gmxj7" rel="nofollow noreferrer">live example</a></p>