[question] TypeScript error with theme options

Order ID or Support key 💳 (optional)

48888

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

The problem in depth 🔍

I am getting a TypeScript error saying that my options object is not assignable to parameter type Themeoptions | undefined.

What do I need to do to fix this error?

Here is my theme.ts file:

import {blue, grey, red} from "@mui/material/colors";
import {createTheme} from "@mui/material/styles";
import * as React from "react";

const primaryColor = blue;
const secondaryColor = red;

declare module '@mui/material/styles' {
    interface TypographyVariants {
        bodyLandingPage1: React.CSSProperties;
    }

    // allow configuration using `createTheme`
    interface TypographyVariantsOptions {
        bodyLandingPage1?: React.CSSProperties;
    }
}

// Update the Typography's variant prop options
declare module '@mui/material/Typography' {
    interface TypographyPropsVariantOverrides {
        bodyLandingPage1: true;
    }
}


const theme = createTheme({
    breakpoints: {
        values: {
            xs: 0,
            sm: 600,
            md: 900,
            lg: 1200,
            xl: 1536,
        },
    },
    palette: {
        primary: {
            50: primaryColor[50],
            main: primaryColor[700],
            800: primaryColor[800],
        },
        secondary: {
            50: secondaryColor[50],
            main: secondaryColor[700],
        },
        grey: {
            50: grey[50],
            100: grey[100],
            200: grey[200],
            300: grey[300],
            400: grey[400],
            500: grey[500],
            600: grey[600],
        },
    },
    typography: {
        bodyLandingPage1: {
            fontSize: "18px",
            fontFamily: 'Roboto, sans-serif'
        }
    }
});


export default theme;

tsconfig.json:

{
  "compilerOptions": {
    "target": "ESNext",
    "lib": ["DOM", "DOM.Iterable", "ESNext"],
    "module": "ESNext",
    "skipLibCheck": true,

    /* Bundler mode */
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",

    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true
  },
  "include": ["src"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

Your environment 🌎

 System:
    OS: Windows 10 10.0.22621
    @mui/icons-material: ^5.11.16 => 5.11.16
    @mui/material: ^5.12.2 => 5.12.2
    @mui/private-theming:  5.12.0
    @mui/styled-engine:  5.12.0
    @mui/system:  5.12.1
    @mui/types:  7.2.4
    @mui/utils:  5.12.0
    @types/react: ^18.0.28 => 18.2.0
    react: ^18.2.0 => 18.2.0
    react-dom: ^18.2.0 => 18.2.0
    typescript: ^5.0.2 => 5.0.4