title: How can I override ExpansionPanelSummary deep elements with styled-components?
body: <p>Using <a href="https://material-ui.com/guides/interoperability/#deeper-elements" rel="nofollow noreferrer">the docs/examples</a> for overriding Material UI styling with styled-components, I've managed to style the root and "deeper elements" within an <code>ExpansionPanel</code> and <code>ExpansionPanelDetails</code>.</p>
  
  <p>However, when I use the same technique to return an overridden <code>ExpansionPanelSummary</code> from a function passed to <code>styled()</code>, the <code>ExpansionPanelSummary</code> moves in the DOM and the whole <code>ExpansionPanel</code> no longer renders correctly.</p>
  
  <p>The technique in question, as applied to <code>ExpansionPanel</code> (this works as expected, on the container <code>ExpansionPanel</code>):</p>
  
  <pre><code>import MUIExpansionPanel from '@material-ui/core/ExpansionPanel';
  
  export const ExpansionPanel = styled(props =&gt; (
    &lt;MUIExpansionPanel
      classes={{expanded: 'expanded'}}
      {...props}
    /&gt;
  ))`
    &amp;&amp; {
      ...root style overrides
    }
    &amp;&amp;.expanded {
      ...expanded style overrides
    }
  `;
  
  </code></pre>
  
  <p>The typical DOM (with class names abbreviated) for <code>ExpansionPanel</code> and friends:</p>
  
  <pre><code>&lt;div class="MuiExpansionPanel..."&gt;
    &lt;div class="MuiExpansionPanelSummary..." /&gt;
    &lt;div class="MuiCollapse-container...&gt;
      &lt;div class="MuiCollapse-wrapper...&gt;
        &lt;div class="MuiCollapse-wrapperInner...&gt;
          &lt;div class="MuiExpansionPanelDetails..." /&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The DOM when I apply the above technique to <code>ExpansionPanelSummary</code>:</p>
  
  <pre><code>&lt;div class="MuiExpansionPanel..."&gt;
    &lt;div class="MuiCollapse-container...&gt;
      &lt;div class="MuiCollapse-wrapper...&gt;
        &lt;div class="MuiCollapse-wrapperInner...&gt;
          &lt;div class="MuiExpansionPanelSummary..." /&gt;
          &lt;div class="MuiExpansionPanelDetails..." /&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>For completeness, here's a minimal repro of what I'm doing to <code>ExpansionPanelSummary</code>, that triggers the DOM switch:</p>
  
  <pre><code>export const ExpansionPanelSummary = styled(props =&gt; (
    &lt;MUIExpansionPanelSummary
      {...props}
    /&gt;
  ))``;
  </code></pre>
  
  <p>And my JSX is standard <code>ExpansionPanel</code> setup:</p>
  
  <pre><code>&lt;ExpansionPanel&gt;
    &lt;ExpansionPanelSummary&gt;
      Summary Label
    &lt;/ExpansionPanelSummary&gt;
    &lt;ExpansionPanelDetails&gt;
      &lt;div&gt;Some Content&lt;/div&gt;
    &lt;/ExpansionPanelDetails&gt;
  &lt;/ExpansionPanel&gt;
  </code></pre>