title: Property 'palette' is not recognised by DefaultTheme from MaterialUI, it stopped to work once material ui have been moved from v4 to v5
body: <p>I'm moving app from Material UI v4 to v5 and I'm facing few issues.
  One of them is that property 'palette' in not recognised by DefaultTheme from Material UI once it's used in makeStyles. That component worked properly in v4, but once I moved majority to v5 it shows me an error now and don't recognise 'palette' property. Can You please look at it and let me know how to fix it ?</p>
  <p>this is how it's called in main component:
  import { makeStyles } from '@mui/styles';</p>
  <pre><code>const useStyles = makeStyles((theme) =&gt; ({
  styledButton: {
      '&amp;': { color: theme.palette.cerulean },
      '&amp;.Mui-selected': {
          backgroundColor: theme.palette.aliceBlue,
          color: theme.palette.cerulean,
      },
      '&amp;:hover': {
          backgroundColor: 'rgba(227,245,255, 0.5) !important',
      },
  },
  </code></pre>
  <p>}));</p>
  <p>When I hover over above 'palette' TS give a comment like: Property 'palette' does not exist on type 'DefaultTheme'.</p>
  <p>Theme is called in App as below:</p>
  <pre><code>import { ThemeProvider } from '@mui/styles';
  </code></pre>
  <p>import { MainTheme } from '@nevomo/utilities';</p>
  <pre><code>export const App: FC = () =&gt; (
  &lt;StyledEngineProvider injectFirst&gt;
      &lt;ThemeProvider theme={MainTheme}&gt;
          &lt;SCThemeProvider theme={MainTheme}&gt;
              &lt;CssBaseline /&gt;
              &lt;Router&gt;
                  &lt;AuthContextProvider&gt;
                      &lt;Notifications /&gt;
                      &lt;RoutingManager /&gt;
                  &lt;/AuthContextProvider&gt;
              &lt;/Router&gt;
          &lt;/SCThemeProvider&gt;
      &lt;/ThemeProvider&gt;
  &lt;/StyledEngineProvider&gt;
  </code></pre>
  <p>);</p>
  <p>MainTheme looks like:</p>
  <pre><code>import { createTheme, Theme } from '@mui/material/styles';
  import { paletteColors } from './main-theme-colors';
  
  export const MainTheme: Theme = createTheme({
  spacing: (factor: number) =&gt; `${factor * 1}rem`,
  palette: {
      primary: {
          main: paletteColors.primary.main,
      },
      secondary: {
          main: paletteColors.secondary.main,
      },
      error: {
          main: paletteColors.error.main,
      },
      white: '#FFFFFF',
      lighterBlue: '#EFFBFF',
      lightBlue: '#DEF7FF',
      celeste: '#00A7E1',
      blue: '#0027d3',
      navy: '#083D77',
      greenSalad: '#4DA167',
      red: '#d32f2f',
      pink: '#FFE3E3',
      lightPink: '#ECD6E6',
      darkPink: '#700353',
      black: '#000000',
      orange: '#FD5C01',
      darkRed: '#AD160B',
      aliceBlue: '#E3F5FF',
      cerulean: '#007CBA',
  },
  </code></pre>
  <p>});</p>
  <p>thanks a lot !</p>