title: How to use 'theme' and 'props' in makeStyles?
body: <p>How do I write <code>makeStyles()</code> so that it allows me to use both theme variables and props?</p>
  
  <p>I've tried this:</p>
  
  <pre><code>const useStyles = makeStyles(theme =&gt; ({
    appbar: props =&gt; ({
      boxShadow: "none",
      background: "transparent",
      marginTop: theme.spacing(2),
      marginBottom: theme.spacing(2),
      color: theme.palette.getContrastText(props)
    }),
  }));
  </code></pre>
  
  <p>And called it in the component with:</p>
  
  <pre><code>const classes = useStyles(backgroundColor);
  </code></pre>
  
  <p>Where <code>backgroundColor</code> is a prop on the component with type <code>CSSProperties["backgroundColor"]</code></p>
  
  <p>But I'm getting the error:</p>
  
  <pre><code>TypeError: Cannot read property 'rules' of undefined
      at RuleList.onUpdate (C:\Users\...\node_modules\jss\dist\jss.cjs.js:944:14)
      at RuleList.update (C:\Users\...\node_modules\jss\dist\jss.cjs.js:923:12)
      at StyleSheet.update (C:\Users\...\node_modules\jss\dist\jss.cjs.js:1178:39)
      at attach (C:\Users\...\node_modules\@material-ui\styles\makeStyles\makeStyles.js:141:18)
      at C:\Users\...\node_modules\@material-ui\styles\makeStyles\makeStyles.js:262:7
      at useSynchronousEffect (C:\Users\...\node_modules\@material-ui\styles\makeStyles\makeStyles.js:207:14)
      at C:\Users\...\node_modules\@material-ui\styles\makeStyles\makeStyles.js:254:5
      at Layout (C:\Users\...\.next\server\static\development\pages\index.js:1698:17)
      at processChild (C:\Users\...\node_modules\react-dom\cjs\react-dom-server.node.development.js:2888:14)
      at resolve (C:\Users\...\node_modules\react-dom\cjs\react-dom-server.node.development.js:2812:5)
      at ReactDOMServerRenderer.render (C:\Users\...\node_modules\react-dom\cjs\react-dom-server.node.development.js:3202:22)
      at ReactDOMServerRenderer.read (C:\Users\...\node_modules\react-dom\cjs\react-dom-server.node.development.js:3161:29)
      at renderToString (C:\Users\...\node_modules\react-dom\cjs\react-dom-server.node.development.js:3646:27)
      at render (C:\Users\...\node_modules\next-server\dist\server\render.js:86:16)
      at renderPage (C:\Users\...\node_modules\next-server\dist\server\render.js:211:20)
      at ctx.renderPage (C:\Users\...\.next\server\static\development\pages\_document.js:2404:22)
  
    100 |   handleSignUpClick,
    101 |   backgroundColor
    102 | }) =&gt; {
  &gt; 103 |   const classes = useStyles(backgroundColor);
    104 |   return (
    105 |     &lt;AppBar className={classes.appbar}&gt;
    106 |       &lt;Container maxWidth="lg"&gt;
  </code></pre>
  
  <p>edit: I'm using version 4.0.0-beta.1 of material core and styles</p>