Typescript 模块增强不起作用：“PaletteColorOptions”类型上不存在属性“main”

Question

我一直在研究 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() {
  const defaultColors = Default();
  
  const palette: PaletteOptions = {
    ...defaultColors,
    divider: defaultColors.primary?.main, // error in compile. Cannot find 'main'
  };

  const theme: Theme = createTheme({
    palette
  });

  console.log(theme.palette.primary.light);

  return (
    <ThemeProvider theme={theme}>
      <Button color="primary" variant="contained">
        neutral
      </Button>
    </ThemeProvider>
  );
}

Answer 1

TypeScript 错误与您的模块增强无关。问题只是

defaultColors

是

PaletteOptions

类型。

PaletteOptions

定义主要类型为 PaletteColorOptions。

这是 PaletteColorOptions 的定义及其构建的类型：

export type PaletteColorOptions = SimplePaletteColorOptions | ColorPartial;

export interface SimplePaletteColorOptions {
  light?: string;
  main: string;
  dark?: string;
  contrastText?: string;
}

export type ColorPartial = Partial<Color>;

export interface Color {
  50: string;
  100: string;
  200: string;
  300: string;
  400: string;
  500: string;
  600: string;
  700: string;
  800: string;
  900: string;
  A100: string;
  A200: string;
  A400: string;
  A700: string;
}

因此 TypeScript 编译器知道

defaultColors.primary

是

SimplePaletteColorOptions

或

ColorPartial

，但它不知道是哪一个。然后，您将引用

defaultColors.primary.main

，但不能保证它会存在，除非

defaultColors.primary

的类型是

SimplePaletteColorOptions

。

您可以通过为

Default

函数使用更具体的返回类型来解决此问题，让 TypeScript 知道

primary

的类型是

SimplePaletteColorOptions

：

interface DefaultPaletteOptions extends PaletteOptions {
  primary?: SimplePaletteColorOptions;
}
const Default = (): DefaultPaletteOptions => {
  return {
    primary: {
      lighter: "#ddd",
      light: "#ddd",
      main: "#ddd",
      dark: "#ddd",
      darker: "#ddd"
    }
  };
};

相关解答：

• 如何使用 TypeScript 在 Material UI 上添加自定义颜色名称？
• MUI 通过模块增强覆盖滑块颜色选项

Answer 2

要使自定义调色板颜色与 MUI 组件配合使用（即

<Button color={'neutral'}>

，您还需要增强该组件模块：

declare module '@mui/material/Button' {
  interface ButtonPropsColorOverrides {
    neutral: true;
  }
}

但是，在非 MUI 组件中使用自定义主题值时，我仍然遇到一些问题。我通过将自定义颜色分配给它自己的类型常量，然后显式地将

Property 'main' does not exist

分配给字符串来解决这个问题：.main

https://mui.com/material-ui/customization/palette/#non-palette-colors