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

Question

赏金将在 6 天后到期。 此问题的答案有资格获得+150声望赏金。 Jamie Hutber想引起更多关注这个问题：

目前我的头撞到墙上仍在试图弄清楚如何定义一个不仅仅是一个项目的自定义名称。 或者边界以外的任何东西。

我正在尝试扩展 MUI 调色板，以便可以通过以下代码使用我自己的命名属性：

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可以正常工作，但是由于尝试添加新背景，它确实对此有所抱怨。

完全错误：

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

您可以签入 mui 的文件 createPalette.d.ts。 因为background已经在interface PaletteOptions中，（如您在此处看到的）

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

因此，您不能像这样使用模块扩充来覆盖它。 只需使用另一个名称。