title: React material-ui Cannot read property 'direction' of null
body: <p>This error pops up.</p>
  
  <p><code>Cannot read property 'direction' of null</code></p>
  
  <pre><code>127 | var options = (0, _extends2.default)({}, stylesCreator.options, stylesOptions, {
  &gt; 128 |   flip: typeof stylesOptions.flip === 'boolean' ? stylesOptions.flip : theme.direction === 'rtl'
        | ^  129 | });
    130 | var sheetsRegistry = stylesOptions.sheetsRegistry;
  </code></pre>
  
  <p>It happens because of the following code. <code>useStyles</code></p>
  
  <pre><code>// @flow
  import * as React from 'react';
  import Avatar from '@material-ui/core/Avatar';
  import Button from '@material-ui/core/Button';
  import FormControl from '@material-ui/core/FormControl';
  import FormControlLabel from '@material-ui/core/FormControlLabel';
  import Checkbox from '@material-ui/core/Checkbox';
  import Input from '@material-ui/core/Input';
  import InputLabel from '@material-ui/core/InputLabel';
  import LockIcon from '@material-ui/icons/LockOutlined';
  import Paper from '@material-ui/core/Paper';
  import Typography from '@material-ui/core/Typography';
  import { makeStyles } from '@material-ui/styles';
  
  const useStyles = makeStyles(theme =&gt; ({
    main: {
      width: 'auto',
      display: 'block', // Fix IE 11 issue.
      marginLeft: theme.spacing.unit * 3,
      marginRight: theme.spacing.unit * 3,
      [theme.breakpoints.up(400 + theme.spacing.unit * 3 * 2)]: {
        width: 400,
        marginLeft: 'auto',
        marginRight: 'auto',
      },
    },
    paper: {
      marginTop: theme.spacing.unit * 8,
      display: 'flex',
      flexDirection: 'column',
      alignItems: 'center',
      padding: `${theme.spacing.unit * 2}px\
      ${theme.spacing.unit * 3}px\
      ${theme.spacing.unit * 3}px`,
    },
    avatar: {
      margin: theme.spacing.unit,
      backgroundColor: theme.palette.secondary.main,
    },
    form: {
      width: '100%', // Fix IE 11 issue.
      marginTop: theme.spacing.unit,
    },
    submit: {
      marginTop: theme.spacing.unit * 3,
    },
  }));
  
  const Login = (props) =&gt; {
    const classes = useStyles();
  
    return (
      &lt;main className={classes.main}&gt;
        &lt;Paper className={classes.paper}&gt;
          &lt;Avatar className={classes.avatar}&gt;
            &lt;LockIcon /&gt;
          &lt;/Avatar&gt;
          &lt;Typography component="h1" variant="h5"&gt;
            Sign in
          &lt;/Typography&gt;
          &lt;form className={classes.form}&gt;
            &lt;FormControl margin="normal" required fullWidth&gt;
              &lt;InputLabel htmlFor="email"&gt;Email Address&lt;/InputLabel&gt;
              &lt;Input id="email" name="email" autoComplete="email" autoFocus /&gt;
            &lt;/FormControl&gt;
            &lt;FormControl margin="normal" required fullWidth&gt;
              &lt;InputLabel htmlFor="password"&gt;Password&lt;/InputLabel&gt;
              &lt;Input
                name="password"
                type="password"
                id="password"
                autoComplete="current-password"
              /&gt;
            &lt;/FormControl&gt;
            &lt;FormControlLabel
              control={&lt;Checkbox value="remember" color="primary" /&gt;}
              label="Remember me"
            /&gt;
            &lt;Button
              type="submit"
              fullWidth
              variant="contained"
              color="primary"
              className={classes.submit}
            &gt;
              Sign in
            &lt;/Button&gt;
          &lt;/form&gt;
        &lt;/Paper&gt;
      &lt;/main&gt;
    );
  };
  
  export default Login;
  </code></pre>
  
  <p>Here is my app component</p>
  
  <pre><code>import React from 'react';
  import { MuiThemeProvider } from '@material-ui/core/styles';
  import CssBaseline from '@material-ui/core/CssBaseline';
  import {
    Switch,
  } from 'react-router-dom';
  import theme from './theme';
  import Auth from './Auth';
  
  const App = () =&gt; (
    &lt;MuiThemeProvider theme={theme}&gt;
      &lt;CssBaseline /&gt;
      &lt;Switch&gt;
        &lt;Auth /&gt;
      &lt;/Switch&gt;
    &lt;/MuiThemeProvider&gt;
  );
  
  export default App;
  </code></pre>
  
  <p>The <code>theme</code> seems to be undefined inside <code>makeStyles</code>.
  Do you know what's happening here?</p>