Question

我正在尝试向material-ui调色板添加新的自定义颜色（我知道它随4.1一起提供，但是将来会淘汰）

我是打字稿的新手，所以我很难弄清楚该怎么做才能使它工作

我遵循了amterial-ui文档https://material-ui.com/guides/typescript/#customization-of-theme中的指南，并提出了这个建议

import createMuiTheme, { ThemeOptions } from '@material-ui/core/styles/createMuiTheme';

declare module '@material-ui/core/styles/createPalette' {
  interface Palette {
    warning?: PaletteColor
    success?: PaletteColor
  }

  interface PaletteOptions {
    warning?: PaletteColorOptions
    success?: PaletteColorOptions
  }
}

export default function createMyTheme(options: ThemeOptions) {
  return createMuiTheme({
    ...options,
  })
}

以及使用时

import createStyles from '@material-ui/core/styles/createStyles';
import { Theme } from '@material-ui/core/styles/createMuiTheme';

const styles = (theme: Theme) => createStyles({
  success: {
    backgroundColor: theme.palette.success.main,
  },
  error: {
    backgroundColor: theme.palette.error.dark,
  },
  info: {
    backgroundColor: theme.palette.primary.dark,
  },
  warning: {
    backgroundColor: theme.palette.warning.main,
  },
});

使用withStyles HOC连接到组件

我得到的只是控制台中的此错误

Object is possibly 'undefined'.  TS2532

指向backgroundColor: theme.palette.success.main,

有人做过这项工作吗？

Answer 1

您不必将Palette属性设置为可选-假定它们将具有一些默认值，如果没有被选项覆盖的话。将其描述更改为以下内容：

interface Palette {
  warning: PaletteColor
  success: PaletteColor
}

一切都应该正常工作。

向调色板添加自定义颜色可能会使对象“未定义”。 TS2532

1 个答案: