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

Question

我正在尝试扩展 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;
}

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