Material UI v5 - Property 'spacing' does not exist on type 'DefaultTheme' when using a custom theme

user_1548432 0
Viewed 2806

I am using material ui version 5, i have a custom theme which i have wrapped in all my components around.

In one of my components i am trying to give paper some padding based on my theme, however i get the following error.

Property 'spacing' does not exist on type 'DefaultTheme'

       <AppProvider>
            <Theme>
                <Layout>
                    <ProtectedRoute>
                        <Component {...pageProps} />
                    </ProtectedRoute>
                </Layout>
            </Theme>
        </AppProvider>

campaign.tsx

const useStyles = makeStyles((theme) => ({
    paper: {
        padding: theme.spacing(3),
    },
}));

export default function Campaign(props: ICampaginProps): ReactElement | null {
    const classes = useStyles();

theme.tsx

const DEFAULT_THEME = createTheme({
    typography: {
        fontSize: 12,
    },
    palette: {
        mode: "light",
        primary: {
            main: "#212121",
        },
        secondary: {
            main: "#fafafa",
        },
    },
});
material-ui reactjs
1 Answers

Have you tried this suggestion from the MUI migration documentation:

[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 {}
}
user_31804890
Related