title: React & Material-UI: Theme undefined in createStyles() with TypeScript
body: <p>I'm learning React with TypeScript and using the Material UI framework for the frontend. I try to get the media queries working, but I got an error:</p>
  
  <blockquote>
    <p>Uncaught TypeError: Cannot read property 'up' of undefined
        at styles (webpack-internal:///./app/components/navigation/Toolbar/index.tsx:59)</p>
  </blockquote>
  
  <p>This is the corresponding code:</p>
  
  <pre><code>const styles = ({breakpoints}: Theme) =&gt; createStyles( {
      grow: {
          flexGrow: 1
      },
      menuButton: {
          marginLeft: -12,
          marginRight: 20
      },
      sectionDesktop: {
          display: 'none',
          [breakpoints.up('md')]: {
              display: 'flex'
          }
      },
      sectionMobile: {
          display: 'flex'
      },
  })
  </code></pre>
  
  <p>The styles are passed to the component with:</p>
  
  <pre><code>export default withStyles(styles)(Toolbar)
  </code></pre>
  
  <p>I read that it is not required to create a custom theme as the default one will be passed automatically to the functions. However, the breakpoints property of theme is undefined which cause a blank page.</p>
  
  <p>Thanks for your help</p>
  
  <p><strong>Edit</strong></p>
  
  <p>Here is the code of the component which will still produce the problem without any other components.</p>
  
  <pre><code>import * as React from 'react'
  import {
      Theme
  } from '@material-ui/core'
  import {
      createStyles,
      WithStyles,
      withStyles
  } from '@material-ui/styles'
  // import Drawer from '../Drawer'
  
  const styles = ({breakpoints}: Theme) =&gt; createStyles( {
      grow: {
          flexGrow: 1
      },
      menuButton: {
          marginLeft: -12,
          marginRight: 20
      },
      sectionDesktop: {
          display: 'none',
          [breakpoints.up('md')]: {
              display: 'flex'
          }
      },
      sectionMobile: {
          display: 'flex'
      },
  })
  
  namespace Toolbar {
      interface Props {
      }
  
      export interface State {
          isOpen : boolean
          mobileMoreAnchorEl? : EventTarget &amp; HTMLElement
      }
  
      export type AllProps = Props &amp; WithStyles&lt;typeof styles&gt;
  }
  
  class Toolbar extends React.Component&lt;Toolbar.AllProps, Toolbar.State&gt; {
      constructor(props: Toolbar.AllProps, context?: any) {
          super(props, context);
          this.state = { isOpen: false, mobileMoreAnchorEl: undefined}
      }
  
      render() {
          const { classes } = this.props
          // const { isOpen } = this.state
  
          return(
              &lt;React.Fragment&gt;
                  &lt;div className={classes.sectionDesktop}&gt;
                      Hello
                  &lt;/div&gt;
                  &lt;div className={classes.sectionMobile}&gt;
                      World
                  &lt;/div&gt;
              &lt;/React.Fragment&gt;
          )
      }
  
  }
  
  export default withStyles(styles)(Toolbar)
  </code></pre>
  
  <p>The main.tsx (a.k.a index.js) looks like this:</p>
  
  <pre><code>import * as React from 'react';
  import * as ReactDOM from 'react-dom';
  import { Provider } from 'react-redux';
  import { createBrowserHistory } from 'history';
  import { configureStore } from 'app/store';
  import { Router } from 'react-router';
  import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles';
  import { App } from './app';
  
  // prepare store
  const history = createBrowserHistory()
  const store = configureStore()
  const theme = createMuiTheme()
  
  ReactDOM.render(
    &lt;Provider store={store}&gt;
      &lt;Router history={history}&gt;
        &lt;MuiThemeProvider theme={theme} &gt;
          &lt;App /&gt;
        &lt;/MuiThemeProvider&gt;
      &lt;/Router&gt;
    &lt;/Provider&gt;,
    document.getElementById('root')
  );
  </code></pre>
  
  <p>So, adding MuiThemeProvider does not help.</p>