title: 'Undefined' when attempting to pass MaterialUI theme props to styled components
body: <p>I'm attempting to access my Material-UI theme props within a styled component, however I keep getting...</p>
  <p><code>TypeError: Cannot read property 'primary' of undefined</code> or similar errors in the browser.</p>
  <p>Here is my custom theme (<code>index.ts</code>)</p>
  <pre><code>import { createMuiTheme } from &quot;@material-ui/core&quot;;
  import { blue } from &quot;@material-ui/core/colors&quot;;
  
  const theme = createMuiTheme({
      palette: {
        primary: {
          main: blue[800],
          contrastText: &quot;#FFF&quot;
        },
        secondary: {
          main: blue[600],
          contrastText: &quot;#FFF&quot;
        }
      },
      typography : {
          fontFamily: [
              &quot;Nunito&quot;,
              &quot;Roboto&quot;,
          ].join(&quot;,&quot;) 
      }
  });
  
  export default theme;
  </code></pre>
  <p>Here is where my theme wraps my application in the <code>App.tsx</code></p>
  <pre><code>// Other imports
  import theme from &quot;../../app/theme/index&quot;;
  
  const App: React.FC = () =&gt; {
      return (
          &lt;&gt;
              &lt;StylesProvider injectFirst&gt;
                  &lt;ThemeProvider theme={theme}&gt;
                      // Routing stuff
                  &lt;/ThemeProvider&gt;
              &lt;/StylesProvider&gt;
          &lt;/&gt;
      );
  };
  
  export default App;
  </code></pre>
  <p>And here is where I am attempting to use my styled component</p>
  <pre><code>import { ListItem } from &quot;@material-ui/core&quot;;
  import React from &quot;react&quot;;
  import styled from &quot;styled-components&quot;;
  
  const Brand = styled(ListItem)`
      background-color: ${props =&gt; props.theme.palette.primary.dark},
      padding: ${props =&gt; props.theme.spacing(1)},
      font-size: ${props =&gt; props.theme.typography.h6.fontSize},
      font-weight: ${props =&gt; props.theme.typography.fontWeightMedium},
      color: &quot;white&quot;,
      min-height: &quot;64px&quot;,
      padding-left: ${props =&gt; props.theme.spacing(6)}
  `;
  
  const SidebarNew: React.FC = () =&gt; {
  
      return (
          &lt;Brand button&gt;
              // Stuff
          &lt;/Brand&gt;
      );
  };
  
  export default SidebarNew;
  </code></pre>
  <p>This compiles but fails in the browser. What am I missing here?</p>
  <p>If I use material-ui's built in <code>styled</code> like below, it appears to work, however I would prefer to use <code>styled-components</code> directly</p>
  <pre><code>const Brand = styled(ListItem)(({ theme }) =&gt; ({
      backgroundColor: theme.palette.primary.dark,
      padding: theme.spacing(1),
      fontSize: theme.typography.h6.fontSize,
      fontWeight: theme.typography.fontWeightMedium,
      color: &quot;white&quot;,
      minHeight: 64,
      paddingLeft: theme.spacing(6)
  }));
  </code></pre>