title: MUI v5 - Seperate styling from component file
body: <p>I want to separate styling from component File in MUI v5. The way I did it in v4 was using <code>makeStyles</code> like that:</p>
  <p><code>Page.style.js</code>:</p>
  <pre><code>import { makeStyles } from &quot;@material-ui/core&quot;;
  
  export const useStyles = makeStyles({
    root: {
      background: &quot;white&quot;,
    },
  });
  </code></pre>
  <p><code>Page.js</code>:</p>
  <pre><code>import React from &quot;react&quot;;
  import useStyles from &quot;./Page.style&quot;;
  
  const Page = () =&gt; {
    const classes = useStyles();
          
    return (
      &lt;div className={classes.root}&gt;&lt;/div&gt;
    )
  }
  </code></pre>
  <p><code>makeStyles</code> is now legacy and I heard it will be deprecated next version.
  What is the proper way to separate styling and component into different files in v5?</p>