Material-ui: createMuiTheme custom variables not recognized in Typescript

[marjan2k]

Reference: https://material-ui.com/customization/themes/#custom-variables

I followed the reference to add custom variables as I needed more color palettes as opposed to just primary and secondary.

Typescript keeps complaining blue: { light: string; main: string; dark: string; contrastText: string; };' is not assignable to parameter of type 'ThemeOptions'

export default createMuiTheme({
  palette: {
    primary: {
      light: '#FFB644',
      main: '#FF8500',
      dark: '#C55600',
      contrastText: '#FFFFFF',
    },
    secondary: {
      light: '#96F87D',
      main: '#62C44D',
      dark: '#2A931C',
      contrastText: '#FFFFFF',
    },
    blue: {
      light: '#72C3FF',
      main: '#3393DA',
      dark: '#0066A8',
      contrastText: '#FFFFFF',
    }
}})

[eps1lon]

I believe you can solve this with module augmentation:

import { Theme } from '@material-ui/styles';
declare module "@material-ui/styles" {
    interface Theme {
        blue: Theme['palette']['primary'];
    }
}

That way you should also have the typings of your Theme available when using createStyles. However this would mean the every instance of Theme would be assumed to have the blue color. Even if you have multiple MuiThemeProvider and different themes.

Please let me know if this worked. A working example with all caveats should be added to the docs.

[marjan2k]

Hey @eps1lon,

Thanks for the quick response. In our case, we actually want every instance of Theme to have blue.

I think I'm still missing finer details.

[eps1lon]

import { Palette, PaletteOptions } from "@material-ui/core/styles/createPalette";
import { createMuiTheme } from "@material-ui/core/styles";

declare module "@material-ui/core/styles/createPalette" {
  interface Palette {
    blue: Palette["primary"];
  }

  interface PaletteOptions {
    blue: PaletteOptions["primary"];
  }
}

export default createMuiTheme({
  palette: {
    blue: {
      main: "blue"
    }
  }
});

That should do the trick.

[marjan2k]

Yes that did it thanks!

[marjan2k]

A small change I made to keep it more general is use interfaces PaletteColor and PaletteColorOptions.

```tsx
import createMuiTheme from "@material-ui/core/styles/createMuiTheme";
import { PaletteColor, PaletteColorOptions } from "@material-ui/core/styles/createPalette";

declare module "@material-ui/core/styles/createPalette" {
interface Palette {
blue: PaletteColor;
}

interface PaletteOptions {
blue: PaletteColorOptions;
}
}

export default createMuiTheme({
palette: {
blue: {
main: "blue"
}
}
});