Customization MUI theme.palette insufficient : 10 hues of Primary not accepted?

Question

I work on react-typescript and I have to create a rather complex MUI theme.palette. Besides the inbuild primary/secondary/error/warning/info/success I manage to create a customized entries such as interactive/positive/danger ...

To do so I used module augmentation as follow :

declare module '@mui/material/styles/createPalette' {
    interface Palette {
        interactive: Palette['primary'];
        positive: Palette['primary'];
        danger: Palette['primary'];

    }

    interface PaletteOptions {
        interactive: PaletteOptions['primary'];
        positive: PaletteOptions['primary'];
        danger: PaletteOptions['primary'];
    }
}

The problem is that inbuilt and newly added paletteOption present only 3 posibilities : main/light/dark/contrastText for subcolor...

  primary: {
            main: '#FBBD2C',
            light: '#FFU9EC',
            dark: '#503F0D',
            contrastText: '',
        },

However I have about ten sub-colors/hues to enter for each category. I try to force additional entries such as here 'fourth':

danger: {
            main: '#F25129',
            light: '#FEC6B8',
            dark: '#C04020',
            fourth: '#C04020',
        },

The error I get :

TS2322: Type '{ main: string; light: string; dark: string; fourth: string; }' is not assignable to type 'PaletteColorOptions | undefined'. Object literal may only specify known properties, and 'fourth' does not exist in type 'PaletteColorOptions'.

I tried to add to the module augmentation above with :

declare module '@mui/material/styles/createPalette' {

   ...

    interface PaletteColorOptions {
        third: PaletteOptions['danger']
    }
}

but it doesn't work.

Is there an alternative solution ?

Customization MUI theme.palette insufficient : 10 hues of Primary not accepted?

0 Answers0