如何使用 Typescript 从 mui 扩展调色板

我正在尝试扩展 mui 提供的调色板。覆盖主色、次要颜色等效果很好，但如果我想在之后创建一组自定义颜色，我不知道如何使其工作。有很多没有打字稿的例子，但是当这个人进入游戏时，事情就变得更加棘手。假设我有这个：

主题.tsx

palette: {
  primary: {...}, // override works
  custom: { 
    main: 'color', 
    dark: 'color1', 
    light: 'color2', 
    contrastText: 'color3' 
  }
}

根据 mui 文档的说法，我应该使用模块增强：

declare module "@material-ui/core/styles/createPalette" {
  interface Palette {
    custom: Palette['primary'];
  }
  interface PaletteOptions {
    custom: PaletteOptions['primary'];
  }
}

没有什么是大喊大叫的，但是当我将它用于 Box 组件时，它不起作用（其他像primary.dark 效果很好）。几天来我一直在试图找出如何做到这一点，但我不得不说我对此一无所知。

我会很感激一些帮助！谢谢！ :)

PS：已经有人提出了同样的问题，但对我没有帮助here https://stackoverflow.com/questions/61097813/how-can-i-extend-color-palette-in-material-ui-with-typescript

正如其他人提到的，文档显示了如何向主题界面添加颜色，但没有显示组件的颜色属性。我想我在源代码中找到了正确的解决方案。这个例子使用的是 Material UI 5，所以我不确定它是否适用于 4，而且我找不到任何关于它的官方文档。

在我的示例中，芯片组件导出多个接口 https://github.com/mui-org/material-ui/blob/master/packages/mui-material/src/Chip/Chip.d.ts#L12您可以通过声明合并来扩展它。以下代码应该允许您将芯片的颜色设置为“facebook”或“twitter”

// define custom colors: https://material-ui.com/customization/palette/
declare module '@mui/material/styles/createPalette' {
  interface Palette {
    facebook: Palette['primary'];
    twitter: Palette['primary'];
  }
  interface PaletteOptions {
    facebook: PaletteOptions['primary'];
    twitter: PaletteOptions['primary'];
  }
}

// Extend color prop on components
declare module '@mui/material/Chip' {
  export interface ChipPropsColorOverrides {
    facebook: true
    twitter: true
  }
}