title: How do I access Material-ui's theme in Styled Component
body: <p>I'm using CRA with Material-ui and Styled Components type of styling.
  When building my CSS I want to access Material-ui's default theme.</p>
  
  <p>part of package.json:</p>
  
  <pre><code>  "dependencies": {
      "react": "^16.8.6",
      "react-dom": "^16.8.6",
      "react-scripts": "3.0.1",
      "@material-ui/core": "^4.2.1",
      "@material-ui/icons": "^4.2.1",
      "@material-ui/styles": "^4.2.1",
      "styled-components": "^4.3.2"
    }
  </code></pre>
  
  <p>When I try the below <code>theme</code> exists on <code>props</code> but is an empty object.</p>
  
  <p>StyledApp.js:</p>
  
  <pre><code>import styled from "styled-components";
  import Button from "@material-ui/core/Button";
  
  export const StyledButtonUsingTheme = styled(Button)`
    //Below will give "Cannot read property 'error' of undefined" 
    background-color: ${props =&gt; props.theme.palette.error.light};
  `;
  </code></pre>
  
  <p>App.js:</p>
  
  <pre><code>import React from "react";
  import "./App.css";
  
  import { StylesProvider, ThemeProvider } from "@material-ui/styles";
  import { createMuiTheme } from "@material-ui/core/styles";
  
  import { StyledButtonUsingTheme } from "./StyledApp";
  
  function App() {
    const defaultTheme = createMuiTheme();
  
    window.console.log("Default theme passing to ThemeProvider", defaultTheme);
  
    return (
      &lt;StylesProvider injectFirst&gt;
        &lt;ThemeProvider theme={defaultTheme}&gt;
          &lt;div className="App"&gt;
            &lt;StyledButtonUsingTheme variant="outlined"&gt;
              Styled Button Using Theme
            &lt;/StyledButtonUsingTheme&gt;
          &lt;/div&gt;
        &lt;/ThemeProvider&gt;
      &lt;/StylesProvider&gt;
    );
  }
  
  export default App;
  </code></pre>
  
  <p>The console.log in <code>App.js</code> shows the whole theme object, and that's what I pass to ThemesProvider. Interestingly <code>props.theme</code> is there! but sadly with no values.</p>