title: Can't customize color palette types on Material UI theme in TypeScript
body: <p>I create a type interface to add custom properties to the Palette like so:</p>
  
  <pre><code>declare module @material-ui/core/styles/createMuiTheme {
    interface PaletteColor {
      transparent?: string;
      gradient?: PaletteColor;
    }
    interface Palette {
      gradient?: PaletteColor;
      transparent?: PaletteColor;
      secondary?: {
        transparent?: string;
      }
    }
  
    interface PaletteColorOptions {
      main?:string;
      dark?:string;
      light?:string;
      transparent?: string;
      gradient?: string;
      test?: string
    }
  }
  </code></pre>
  
  <p>I am trying to a lot of interfaces to get it to work...</p>
  
  <p>Then I use those types in my theme like this:</p>
  
  <pre><code>export default function createMyTheme(options: ThemeOptions) {
      return createMuiTheme({
        ...options,
      })
    }
  </code></pre>
  
  <p>I use that function to create my main theme by importing it and calling it:</p>
  
  <pre><code>const theme = createMyTheme({});
  </code></pre>
  
  <p>And then I set my component style like this:
  background: theme.palette.gradient.main,</p>
  
  <p>and it tells me this:</p>
  
  <pre><code>Property 'gradient' does not exist on type 'Palette'.
  </code></pre>
  
  <p>Environment:
  "@material-ui/core": "^4.9.2",
  "react": "^16.12.0",
  "typescript": "^3.7.5"</p>
  
  <p>Here is my full theme:</p>
  
  <pre><code>const theme = createMyTheme({
    palette: {
      primary: {
        main: '#5FB9A6',
        dark: 'linear-gradient(-68deg, #151E27 , #335850)',
        gradient: 'linear-gradient(-68deg, #151E27 , #335850)'
      },
      secondary: {
        main: '#C68A77',
        transparent: 'rgba(198, 138, 119, 0.7)'
      },
      error: {
        light: '#e5a0a0',
        main: '#CD5C5C',
        dark: '#992c2c',
      },
      text: {
        primary:'#20383C',
        secondary: '#151E27',
        hint: 'rgba(32, 56, 60, 0.7)'
      },
      background: {
        paper: '#fff'
      },
      common: {
        white: "#FFF"
      }
    },
    typography: {
       fontFamily: '"Work Sans"'
    }
  </code></pre>
  
  <p>Any help would be greatly appreciated! Thanks!</p>