title: Referring to window size in React Material-UI makeStyles
body: <p>When I make a custom style for one component, I would have a const like:</p>
  
  <pre><code>const useStyles = makeStyles((theme: Theme) =&gt;
    createStyles({
      screen: {
        margin: 0,
        padding: 0
      },
      surface: {
        backgroundColor: theme.palette.primary.main,
        height: // use windowSize here
      }
    })
  );
  </code></pre>
  
  <p>and then do this in the functional component:</p>
  
  <pre><code>const windowSize = useWindowSize(); // { width:number, height:number }
  const classes = useStyles();
  return (
  &lt;Container fixed className={classes.screen}&gt;
    &lt;Grid container className={classes.surface}&gt;
      &lt;br /&gt;
    &lt;/Grid&gt;
  &lt;/Container&gt;
  </code></pre>
  
  <p>When I want to refer the window size (e.g., window height), I can write</p>
  
  <pre><code>  &lt;Grid container className={classes.surface} height="75%"&gt;
  </code></pre>
  
  <p>but wouldn't it possible to include that information in <code>makeStyles</code> and compute the number, for example the equivalent to <code>calc(100vw - 100px)</code>?<br>
  If I write that <code>calc</code> directly in the <code>makeStyles</code> it would not work.</p>
  
  <p>I have found a library <a href="https://github.com/streamich/react-use" rel="nofollow noreferrer"><code>react-use</code></a> where a hook <a href="https://github.com/streamich/react-use/blob/master/docs/useWindowSize.md" rel="nofollow noreferrer"><code>useWindowSize</code></a> could handle this issue, but not sure if I can do it. Do I have no way than use the <code>height</code> attribute?</p>