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 (
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.