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

Question

我正在尝试扩展 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：有人已经发布了同样的问题，但它对我没有帮助

Answer 1

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

在我的示例中，Chip 组件导出多个接口，您可以通过声明合并来扩展这些接口。以下代码应该允许您将芯片的颜色设置为“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
  }
}

Answer 2

多用户界面5

这是我在 MUI 5 中扩展调色板所采用的方法。

您可以删除 ，extends但仍需要导入Palette且PaletteOptions不带别名。不过，这可能会导致 linter 出现一些问题（未使用的导入）。

为了避免任何恶心的eslint disable事情，我只是覆盖了这些类型，并通过在别名下导入它们来使用现有类型扩展它们。

import {
  Palette as MuiPallete,
  PaletteOptions as MuiPaletteOptions,
} from '@mui/material/styles/createPalette';

declare module '@mui/material/styles/createPalette' {
  interface Palette extends MuiPallete {
    neutralShade: {main: string};
  }

  interface PaletteOptions extends MuiPaletteOptions {
    neutralShade?: {main: string};
  }
}

不知道是否有更好的方法，但这对我来说似乎是最干净的。

Answer 3

从查看源代码来看，您应该使用：

declare module "@material-ui/core/styles/createPalette" {
  interface Palette {
    custom: PaletteColorOptions;
  }
  interface PaletteOptions {
    custom: PaletteColorOptions;
  }
}

我不确定为什么会这样记录。