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

【问题标题】：How do I extend the color palette from mui with Typescript如何使用 Typescript 从 mui 扩展调色板
【发布时间】：2021-03-04 01:17:22
【问题描述】：

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

【问题讨论】：

标签： reactjs typescript material-ui

【解决方案1】：

通过查看源代码，您应该使用：

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

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

【讨论】：

感谢您的快速回答。添加 PaletteColorOption 时，我的自定义颜色变为红色，并显示“对象文字只能指定已知属性，并且“自定义”在“PaletteOptions”类型中不存在。

【解决方案2】：

这是来自我当前的项目。我重用了主要类型。

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

export const Theme = createMuiTheme({
    palette: {
        magic: { main: '#1a1a1a' },
    }
})

【讨论】：

是的，我和你一样。但这对我来说不起作用。当我将 bgcolor='custom.main' 写入我的 Box 时，它没有考虑颜色，而且我也没有任何迹象表明出了什么问题，因为没有任何东西是红色的。所以对你来说这工作正常吗？
你需要customize your components 或类似style={{backgroundColor: theme.pallette.magic.main}}
谢谢！可能是一个愚蠢的问题，但是如何导入您的 theme.pallette.magic-main，这不会自动识别它，对吧？
有不同的选项。最简单的方法是使用 material-ui 中的 useTheme 钩子或 customize your components 。我建议阅读theming in material-ui

【解决方案3】：

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

在我的示例中，Chip 组件导出several interfaces，您可以通过声明合并对其进行扩展。以下代码应该允许您将芯片的颜色设置为“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
  }
}

【讨论】：

这帮助我找到了正确的地方，但对于其他在这里登陆的人来说：1) 不应引用 ChipPropsColorOverrides 自定义属性 2) Chip 需要 contrastText 属性在您的自定义调色板颜色上定义，否则在尝试解析该颜色时您将收到 undefined 错误
谢谢@ChiefMcFrank 我的代码中也没有引号，所以我从示例中删除了它们。

【解决方案4】：

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

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

【讨论】：