Update PaletteColor to include ColorPartial

When customizing the theme with custom palette options, using a numerical Material color scale (e.g. theme.palette.primary[500] throws a type error, though setting the 500 colour for primary is permitted by PaletteColorOptions.

• The issue is present in the latest release.
• I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

The following is permitted by the project’s type definitions of PaletteColorOptions:

// createPallete.d.ts
export type PaletteColorOptions = SimplePaletteColorOptions | ColorPartial;

// myTheme.ts
export const theme = createMuiTheme({
    palette: {
        primary: {
            // permitted by PaletteColorOptions:
            500: '#51C9FF',
    }
});

But it appears that the type definition for the Theme itself, and specifically for PaletteColor, don’t permit ColorPartial’s:

// createPalette.d.ts

export interface PaletteColor {
  light: string;
  main: string;
  dark: string;
  contrastText: string;
}

// myComponent.tsx


const useStyles = makeStyles((theme: Theme) => ({
    primaryText: {
        // Error: Element implicitly has an 'any' type because expression of type '500' can't be used to index type 'PaletteColor'.
        color: theme.palette.primary[500] 
    }
}));

Expected Behavior 🤔

The user should be able to both define a color option for a palette group, then read that colour from the theme.

I believe this could be solved by defining PaletteColor as a union, similar to PaletteColorOptions:

export type PaletteColor = SimplePaletteColor | ColorPartial;

export interface SimplePaletteColor {
  light: string;
  main: string;
  dark: string;
  contrastText: string;
}

Your Environment 🌎

Tech	Version
Material-UI	v4.9.7
React	16.11.0
Browser	N/A
TypeScript	3.8.3
etc.

[BennyHinrichs]

I’m running into the same issue. I can provide a color object with shades, as per PaletteColorOptions, but I can’t access it in makeStyles, as per PaletteColor. For me, it would make things much easier if those lined up so I could access all my shades in makeStyles.

Right now I have two options of doing that. The first is this beautiful piece of code:

((theme.palette.secondary as unknown) as Color)[900]

The second is by making the palette object a named export before I pass it into the createMuiTheme options. But that obviates the whole makeStyles(theme => {}) usage, because then I’m just importing palette wherever.

The docs that you link to only show how to augment the theme with a new property, they don’t show how to change existing properties. If there is no plan to bring PaletteColor and PaletteColorOptions into alignment, it would be very nice to have an example in the docs of overriding existing theme properties.

[BennyHinrichs]

@oliviertassinari Yeah, I haven’t done that very much on here, but let me try it out!