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

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

您可以 checkin 文件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;
}

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