Material UI theme module augmentation not working

Question

I've been reading the MUI documentation, blogs, and other posts on Stackoverflow, yet despite all of that, I can't get my vscode intellisense/typescript to detect my changes.

They're very simple changes, quite similar to what many other examples show, yet nothing.

Could use some help.

// theme.ts
export const getDesignTokens = (mode: PaletteMode) => ({
  palette: {
    mode,
    ...(mode === "light"
      ? {
          // palette values for light mode
          primary: {
            light: "#FF7988",
            main: "#FE5366",
            dark: "#E04052",
          },
          text: {
            primary: "#212121",
            secondary: "#616161",
          },
          background: {
            default: "#ffffff",
          },
          border: {
            light: "#EFEFEF",
            main: "#D9D9D9",
            dark: "#979797",
          },
        }
      : {
          // future dark values
        }),
...

// theme.d.ts
declare module "@mui/material/styles" {
  // allow configuration using `createTheme`
  interface PaletteOptions {
    border?: {
      light: string;
      main: string;
      dark: string;
    };
  }
  interface Palette {
    border: {
      light: string;
      main: string;
      dark: string;
    };
  }
}

doesn't show the new border property

score 4 · Accepted Answer · answered Nov 22 '22 at 08:13

I had to add the import path to the module at the top of the script and that made things work. Not sure why I had to do this, i didnt notice it elsewhere, but it seems to work.

import "@mui/material";    <--

declare module "@mui/material/styles" {
  // allow configuration using `createTheme`
  interface PaletteOptions {
    border?: {
      light: string;
      main: string;
      dark: string;
    };
  }
  interface Palette {
    border: {
      light: string;
      main: string;
      dark: string;
    };
  }
}

Material UI theme module augmentation not working

1 Answers1