title: Why do makeStyles and createStyles have to be separate (Material UI + TypeScript)?
body: <p>I've been using this construction that Material UI requires to deal with TypeScript issues a lot and it's really bugging me that every time I want to style a component I need to remember how to combine 2 different functions into something that will yield a hook (I could solve it with a snippet but that just never feels right to me):</p>
  <pre><code>const useStyles = makeStyles((theme: Theme) =&gt;
    createStyles({
      ...styles
    })
  );
  </code></pre>
  <p>So I tried of course to make it more DRY by just abstracting it away into 1 function but I can't seem to understand how to make the types work for this. Here's my clumsy attempt:</p>
  <pre><code>const makeUseStyles = (styleFunc: (th: Theme) =&gt; CSSProperties | CreateCSSProperties&lt;{}&gt;) =&gt;
    makeStyles((theme: Theme) =&gt; {
      const st = styleFunc(theme);
      return createStyles(st);
    });
  </code></pre>
  <p>This creates 2 problems: <code>createStyles</code> doesn't accept <code>st</code> as an argument:</p>
  <pre><code>Type 'unknown' is not assignable to type 'PropsFunc&lt;(value: JSSFontface, index: number, array: JSSFontface[]) =&gt; unknown, CreateCSSProperties&lt;(value: JSSFontface, index: number, array: JSSFontface[]) =&gt; unknown&gt;&gt;'
  </code></pre>
  <p>And the function returned by <code>makeUseStyles</code> is suddenly expecting a required argument <code>props</code> of type <code>(value: JSSFontface, index: number, array: JSSFontface[]) =&gt; unknown</code>.</p>
  <p>So I assume, since my attempt failed, that this is why there are 2 separate functions needed in the first place to appease TypeScript but it bothers me a lot that a compiler would dictate the abstractions (which it feels like it does all the time the moment I try to DRY out a bit my styling code). So my question is: why?</p>