title: How to select parent components variant in styled components?
body: <p>In <code>styled-components</code> we can add contextual styles using <a href="https://styled-components.com/docs/advanced#referring-to-other-components" rel="nofollow noreferrer">component selector pattern</a>. But how do we select specific parents variants to contextually style the child component? For example, we have three components here, <code>Child</code>, <code>NoteWrapper</code>, and <code>Note</code>.</p>
  <pre><code>const Child = styled.div&lt;{ editing?: boolean }&gt;`
    ${props =&gt; props.editing &amp;&amp; css`some styles`}
  `
  
  const NoteWrapper = styled.div&lt;{ compact?: boolean }&gt;`
    ${props =&gt; props.compact &amp;&amp; css`some styles`}
  `
  
  const Note = styled.input`
  
  /* How do I style this when Child is editing and NoteWrapper is compact */
  
  `
  
  const App = () =&gt; {
    return (
     &lt;Child editing&gt;
      &lt;NoteWrapper compact&gt;
       &lt;Note/&gt;
      &lt;/NoteWrapper&gt;
     &lt;/Child&gt;
    )
  }
  
  `
  </code></pre>
  <p>With plain CSS we could do something like this</p>
  <pre class="lang-css prettyprint-override"><code>
  .child.editing .note-wrapper.compact .note {
    /* Contextual styles here */
  }
  </code></pre>
  <p>I know I can easily use the <code>editing</code> and <code>compact</code> variables and pass it to the <code>Note</code> component. However, it would be difficult to do so if components are highly nested.</p>
  <p>My question is how do I style <code>Note</code> when <code>Child</code> is <code>editing</code> and <code>NoteWrapper</code> is <code>compact</code> in <code>styled-components</code> selector pattern?</p>
  <p>I don't think we can do something like this in <code>styled-components</code> in some way? Can we?</p>
  <pre><code>const Note = styled.input`
   ${Child.editingClass} ${NoteWrapper.compactClass} &amp; {
    /* The contextual styles here*/
   }
  `
  </code></pre>