title: Internal implementation of "makeStyles" in React Material-UI?
body: <p>The purpose of this question is to understand what is happening under the hood. Every time I found the code with <code>makeStyles()</code> I feel that I am just doing a pure copy paste without understanding what is happening under the hood. So I thought of posting a question here so that some one can help me out.</p>
  
  <p>I have seen the below kind of code in many React apps. I was so curious to know what is happening when we make a call to <code>makeStyles()</code>. So I jumped into its definition but I am not able to understand what does it mean. Can someone help me understand how to read/understand it. </p>
  
  <p>What I understand here is that I am passing a function with parameter named <code>theme</code>. After passing that function I have no clue what is going on. I appreciate if some one help me figure out this as well.</p>
  
  <pre><code>// Calling makeStyles()
  const useStyles = makeStyles(theme =&gt; ({
    root: {
      display: 'flex',
    },
    drawer: {
      [theme.breakpoints.up('sm')]: {
        width: drawerWidth,
        flexShrink: 0,
      },
    },
    appBar: {
      marginLeft: drawerWidth,
      [theme.breakpoints.up('sm')]: {
        width: `calc(100% - ${drawerWidth}px)`,
      },
    },
    menuButton: {
      marginRight: theme.spacing(2),
      [theme.breakpoints.up('sm')]: {
        display: 'none',
      },
    },
    toolbar: theme.mixins.toolbar,
    drawerPaper: {
      width: drawerWidth,
    },
    content: {
      flexGrow: 1,
      padding: theme.spacing(3),
    },
  }));
  
  //definition of makeStyles()
  import { Theme as DefaultTheme } from './createMuiTheme';
  import { Styles, WithStylesOptions } from '@material-ui/styles/withStyles';
  import { StylesHook } from '@material-ui/styles/makeStyles';
  
  export default function makeStyles&lt;
    Theme = DefaultTheme,
    Props extends {} = {},
    ClassKey extends string = string
  &gt;(
    styles: Styles&lt;Theme, Props, ClassKey&gt;,
    options?: WithStylesOptions&lt;Theme&gt;,
  ): StylesHook&lt;Styles&lt;Theme, Props, ClassKey&gt;&gt;;
  </code></pre>