调色板中的 MUI 自定义命名选项 - 类型“TypeBackground”上不存在属性“primary”

Question

. Answers to this question are eligible for a +150 reputation bounty. Jamie Hutber wants to to this question:

Currently banging my head against a wall still trying to work out how to define a custom name that isn't just 1 item. Or anything other than border.

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 (

Answer 1

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.