Добавление пользовательских цветов в палитру приводит к тому, что объект, возможно, «не определен». ТС2532

Я пытаюсь добавить новые пользовательские цвета в палитру material-ui (я знаю, что это будет с 4.1, но в будущем это будет не так)

Я новичок в машинописном тексте, поэтому мне трудно понять, что делать, чтобы он работал.

Я следовал руководству из документации amterial-ui https://material-ui.com/guides/typescript/#настройка темы и придумал это

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

и при его использовании

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

подключен к компоненту withStyles HOC

Все, что я получаю, это эта ошибка в консоли

Object is possibly 'undefined'.  TS2532

указывая на backgroundColor: theme.palette.success.main,

Кто-нибудь сделал эту работу?