title: Multiple nested components in styled components
body: <p>I am fairly new to Styled Components (coming from SCSS), although I get the generally gist of it. I was wondering whether there is a way to consolidate the code below. Although it works, it repeats often. Is there a way to use multiple nested selectors? </p>
  
  <pre><code>const StyledDocuments = styled(Documents)`
    &gt; * &gt; table {
      vertical-align: middle;
    }
    &gt; * &gt; table &gt; tbody {
      vertical-align: middle;
    }
    &gt; * &gt; table &gt; tbody &gt; tr {
      vertical-align: middle;
    }
    &gt; * &gt; table &gt; tbody &gt; tr &gt; td {
      vertical-align: middle;
    }
  `;
  </code></pre>
  
  <p>Many thanks. </p>