createMuiTheme custom variables not recognized in Typescript

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',
    }
}})

[marjan2k]

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

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"
    }
  }
});

[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.