相关疑难解决方法(0)

我正在使用 TypeScript 使用 Material UI，并希望向我的主题添加自定义颜色。一切工作正常，除了 VSCode linter 向我显示下一条消息。

Type '{ tan: string; lightRed: string; red: string; offBlack: string; white: string; }' is not assignable to type 'Partial<CommonColors>'.
  Object literal may only specify known properties, and 'tan' does not exist in type 'Partial<CommonColors>'.

在开发和构建方面工作正常，唯一的抱怨是错误消息。我添加了一个自定义类型来尝试解决，但它不起作用。

Type '{ tan: string; lightRed: string; red: string; offBlack: string; white: string; }' is not assignable to type 'Partial<CommonColors>'.
  Object literal may only specify known properties, and 'tan' does not exist in type 'Partial<CommonColors>'.

const theme = …

我一直在研究 Material-UI 并尝试在整个调色板中使用颜色系统。尽管在运行时运行良好，但编译时似乎存在一些问题。有人可以帮我解决以下错误：

错误：

类型“PaletteColorOptions”上不存在属性“main”。
类型“Partial”上不存在属性“main”。(2339)

这里也是 stackblitz：https://stackblitz.com/edit/react-up6bjl-hx1bbh ?file=demo.tsx

代码：

import * as React from 'react';
import {
  createTheme,
  Theme,
  ThemeProvider,
  PaletteOptions
} from '@material-ui/core/styles';

import Button from '@material-ui/core/Button';

declare module '@material-ui/core/styles' {
  interface SimplePaletteColorOptions {
    lighter?: string;
    darker?: string;
  }

  interface PaletteColor {
    lighter?: string;
    darker?: string;
  }
}

const Default = () : PaletteOptions => {

  return {
    primary: {
      lighter: '#ddd',
      light: '#ddd',
      main: '#ddd',
      dark: '#ddd',
      darker: '#ddd'
    },
  };
};

export default function CustomColor() …

我是反应和打字稿的新手。我正在尝试在全局主题上扩展调色板。

在我的 themeConitainer.tsx

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

declare module '@material-ui/core/styles/createPalette' {
  // allow configuration using `createMuiTheme`
  interface Palette {
    accent: PaletteColor
  }
  interface PaletteOptions {
    accent: PaletteColorOptions,
    tertiary: PaletteColorOptions
  }
};

const ThemeContainer: React.FunctionComponent<Props> = (props, themeOptions: ThemeOptions) => {
  const { children } = props;

  const theme = useMemo(() => {
    const nextTheme = createMuiTheme({
      ...themeOptions,
      palette: {
        accent: {
          main: '#ff0000'
        },
      }
    });

    return nextTheme;
  });

  return <ThemeProvider theme={theme}>{children}</ThemeProvider>;
};

export default ThemeContainer;

但是在我的组件上，出现了错误。

此调用没有过载。 …