0
332
ViewsMUI Custom named options in palette - Property 'primary' does not exist on type 'TypeBackground'
I am trying to extend the MUI palette so I can use my own named properties with the following code:
declare module '@mui/material/styles' {
interface Palette {
border: Palette['primary']
background: Palette['primary']
}
// allow configuration using `createTheme`
interface PaletteOptions {
border?: PaletteOptions['primary']
background?: PaletteOptions['primary']
}
}
border works without issues, however since trying to add a new background it does complain about this one.
Full Error:
Property 'primary' does not exist on type 'TypeBackground'. TS2339
8 |
9 | const DocumentUploadContainer = styled('div')`
> 10 | color: ${props => props.theme.palette.background.primary};
| ^
11 | `
12 | export const Documents = () => {
13 | return (
·
Juan Pablo Isaza
1 answers
Answer question0
You can check in file createPalette.d.ts of mui.
Because background is already in interface PaletteOptions, (as you can see here)
export interface PaletteOptions {
primary?: PaletteColorOptions;
secondary?: PaletteColorOptions;
error?: PaletteColorOptions;
warning?: PaletteColorOptions;
info?: PaletteColorOptions;
success?: PaletteColorOptions;
mode?: PaletteMode;
tonalOffset?: PaletteTonalOffset;
contrastThreshold?: number;
common?: Partial<CommonColors>;
grey?: ColorPartial;
text?: Partial<TypeText>;
divider?: string;
action?: Partial<TypeAction>;
background?: Partial<TypeBackground>;
getContrastText?: (background: string) => string;
}
export interface TypeBackground {
default: string;
paper: string;
}
Hence, you cannot use module augmentation to override it like this. Just use another name.
·
Juan Pablo Isaza
Report
Answer question