typescript - Anpassning MUI theme.palette otillräcklig: 10 nyanser av Primary accepteras inte?


Jag arbetar med react-typescript och jag måste skapa ett ganska komplext MUI theme.palette. Förutom de inbyggda primary/secondary/error/warning/info/success lyckas jag skapa anpassade poster som interactive/positive/danger ...

För att göra detta använde jag modulaugumentering enligt följande:

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'];
    }
}

Problemet är att inbyggda och nyss tillagda paletteOption endast har 3 möjligheter: main/light/dark/contrastText för underfärg...

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

Men jag har ungefär tio underfärger/nyanser att skriva in för varje kategori. Jag försöker tvinga fram ytterligare inmatningar som här 'fjärde':

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

Felet jag får:

TS2322: Typen '{ main: string; light: string; dark: string; fourth: string; }' kan inte tilldelas typen 'PaletteColorOptions | undefined'. Objektliteral får endast specificera kända egenskaper, och 'fourth' finns inte i typen 'PaletteColorOptions'.

Jag försökte lägga till modulförstärkningen ovan med :

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

   ...

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

men det fungerar inte.

Finns det en alternativ lösning?