title: Styled Components / React - Style on external element
body: <p>I'm using <a href="https://material-ui.com/" rel="nofollow noreferrer">Material UI</a> components and <a href="https://material-table.com" rel="nofollow noreferrer">MaterialTable</a> and I want to stylish the components using <a href="https://www.styled-components.com/" rel="nofollow noreferrer">StyledComponents</a></p>
  
  <p>But I not been having the desired results when I try to apply styles using StyledComponents</p>
  
  <p><a href="https://codesandbox.io/s/materialui-table-stylecomponent-yhtly" rel="nofollow noreferrer">CodeSandBox Online Example</a></p>
  
  <p>Example:</p>
  
  <pre><code>import styled from 'styled-components'
  import MaterialTable from "material-table";
  
  export const MaterialTableStyled = styled(MaterialTable)`
      /* STYLE FOR FILTER ROW */
      tbody &gt; .MuiTableRow-root:first-child {
          background-color: #F1F3F4 !important;
      }
  `
  </code></pre>
  
  <p>When I use the <code>MaterialTableStyled</code> component no applied the style.</p>
  
  <p>Instead, if I use a <code>div</code> on my StyledComponent:</p>
  
  <pre><code>import styled from 'styled-components'
  
  export const MaterialTableStyled = styled.div`
      /* STYLE FOR FILTER ROW */
      tbody &gt; .MuiTableRow-root:first-child {
          background-color: #F1F3F4 !important;
      }
  `
  </code></pre>
  
  <p>My custom styles work perfecty on that way:</p>
  
  <pre><code>&lt;MaterialTableStyled&gt; // DIV WITH STYLES
      &lt;MaterialTable
          // ALL PROPS AND STUFFS
      /&gt;
  &lt;/MaterialTableStyled&gt;
  </code></pre>
  
  <p>...the question is: it's possible "override" or change styles without using the <code>div</code> to change the style?</p>