title: Material UI pallete add extra color to theme and use it in the same manner Primary/Secondary are used
body: <p>I have added a custom color (blue) to the palette:</p>
  
  <pre><code>const rawTheme = createMuiTheme({
    palette: {
      primary: {
        light: '#7ED321',
        main: '#417505',
        dark: '#2B5101',
        contrastText: '#EEEEEE'
      },
      secondary: {
        light: '#888888',
        main: '#444444',
        dark: '#222222',
        contrastText: '#EEEEEE'
      },
      type: 'dark'
    },
    typography: {
      useNextVariants: true
    }
  });
  
  const blue = {
    main: blueMui['600']
  };
  rawTheme.palette.augmentColor(blue);
  
  const theme = deepmerge(rawTheme, {
    palette: {
      blue,
    },
  });
  
  export default theme;
  </code></pre>
  
  <p>And I would like for it to be used in components like the primary and secondary for example (where the palette is associated with component behavior). Like this:</p>
  
  <pre><code>&lt;Button color={'primary'}/&gt;
  </code></pre>
  
  <p>or</p>
  
  <pre><code>&lt;Button color={'blue'}/&gt;
  </code></pre>
  
  <p>Is there a way to achieve this? Basically, as you add the new color to the palette for it to fetch behavior using as base color the "blue" color prop?</p>
  
  <p>Thanks</p>