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?