Adding custom colors to palette gives Object is possibly 'undefined'. TS2532

Question

Im trying to add new custom colors to material-ui palette (i know its coming with 4.1 but thats are bit out in the future)

I'm new with typescript so I have a hard time figuring out what to do to make it work

I have followed the guide from amterial-ui's documentation https://material-ui.com/guides/typescript/#customization-of-theme and came up with this

import createMuiTheme, { ThemeOptions } from '@material-ui/core/styles/createMuiTheme';

declare module '@material-ui/core/styles/createPalette' {
  interface Palette {
    warning?: PaletteColor
    success?: PaletteColor
  }

  interface PaletteOptions {
    warning?: PaletteColorOptions
    success?: PaletteColorOptions
  }
}

export default function createMyTheme(options: ThemeOptions) {
  return createMuiTheme({
    ...options,
  })
}

and when using it

import createStyles from '@material-ui/core/styles/createStyles';
import { Theme } from '@material-ui/core/styles/createMuiTheme';

const styles = (theme: Theme) => createStyles({
  success: {
    backgroundColor: theme.palette.success.main,
  },
  error: {
    backgroundColor: theme.palette.error.dark,
  },
  info: {
    backgroundColor: theme.palette.primary.dark,
  },
  warning: {
    backgroundColor: theme.palette.warning.main,
  },
});

connected to the component with the withStyles HOC

All i get is this error in the console

Object is possibly 'undefined'.  TS2532

pointing to backgroundColor: theme.palette.success.main,

Has anyone made this work?

Answer 1

You don't have to make Palette properties optional - it is assumed that they will have some default values, if not overridden by options. Change it's description to the following:

interface Palette {
  warning: PaletteColor
  success: PaletteColor
}

And all should work fine.