Property 'palette' is not recognised by DefaultTheme from MaterialUI, it stopped to work once material ui have been moved from v4 to v5

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 ?

this is how it's called in main component: import { makeStyles } from '@mui/styles';

const useStyles = makeStyles((theme) => ({
styledButton: {
    '&': { color: theme.palette.cerulean },
    '&.Mui-selected': {
        backgroundColor: theme.palette.aliceBlue,
        color: theme.palette.cerulean,
    },
    '&:hover': {
        backgroundColor: 'rgba(227,245,255, 0.5) !important',
    },
},

}));

When I hover over above 'palette' TS give a comment like: Property 'palette' does not exist on type 'DefaultTheme'.

Theme is called in App as below:

import { ThemeProvider } from '@mui/styles';

import { MainTheme } from '@nevomo/utilities';

export const App: FC = () => (
<StyledEngineProvider injectFirst>
    <ThemeProvider theme={MainTheme}>
        <SCThemeProvider theme={MainTheme}>
            <CssBaseline />
            <Router>
                <AuthContextProvider>
                    <Notifications />
                    <RoutingManager />
                </AuthContextProvider>
            </Router>
        </SCThemeProvider>
    </ThemeProvider>
</StyledEngineProvider>

);

MainTheme looks like:

import { createTheme, Theme } from '@mui/material/styles';
import { paletteColors } from './main-theme-colors';

export const MainTheme: Theme = createTheme({
spacing: (factor: number) => `${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',
},

});

thanks a lot !

Solution 1:

The OP resolved their issue, but I'll leave this from the MUI migration documentation for future people facing the same problem:

[Types] Property "palette", "spacing" does not exist on type 'DefaultTheme'

Since makeStyles is now exported from @mui/styles package which does not know about Theme in the core package. To fix this, you need to augment the DefaultTheme (empty object) in @mui/styles with Theme from the core.

TypeScript Project

Put this snippet to your theme file:

// it could be your App.tsx file or theme file that is included in your tsconfig.json
import { Theme } from '@mui/material/styles';

declare module '@mui/styles/defaultTheme' {
  // eslint-disable-next-line @typescript-eslint/no-empty-interface (remove this line if you don't have the rule enabled)
  interface DefaultTheme extends Theme {}
}

Javascript Project

If your IDE (ex. VSCode) is able to infer types from d.ts file, create index.d.ts in your src folder with this snippet:

// index.d.ts
declare module "@mui/private-theming" {
  import type { Theme } from "@mui/material/styles";

  interface DefaultTheme extends Theme {}
}