使用 Typescript 在 Material-UI 的 createMuiTheme 中为背景props添加属性

IT技术 javascript reactjs typescript material-ui typescript-typings
2021-05-11 23:34:53

我正在尝试在 createMuiTheme 中添加一个新属性。但是typescript不让我做。

我按照这里的说明操作:https : //next.material-ui.com/guides/typescript/#customization-of-theme

我创建了一个 .ts 文件,我把它放在这里:

import * as React from 'react';

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

而且,这是我创建 Material-UI 主题的地方:

import {createMuiTheme} from "@material-ui/core";

export const darkTheme = createMuiTheme({
    palette: {
        background: {
            darker: '#fafa',
        },
        mode: 'dark'
    },
})

但我收到此错误:

TS2322: Type '{ darker: string; }' is not assignable to type 'Partial<TypeBackground>'.   Object literal may only specify known properties, and 'darker' does not exist in type 'Partial<TypeBackground>'

即便如此,我还是尝试了 material-ui 团队的示例,它是有效的,但不是我的代码。我找不到原因。我可能应该错过一些东西。

我正在使用接口“TypeBackground”,因为它的名称与 material-ui 的 createPalette.d.ts 文件中的名称类似。

export interface TypeBackground {
  default: string;
  paper: string;
}

所以我尝试做同样的事情。我认为这与向调色板属性添加props相同。

谢谢!

2个回答

好的,所以我刚刚找到了解决方案。但我真的不明白为什么它会起作用。

我修改了“声明module”行:

declare module '@material-ui/core/styles/createPalette'

我只是在样式后添加了“createPalette”。现在它可以工作了,我就是不明白为什么 ^^!

您需要在module声明中导出接口。

  export interface TypeBackground {
    darker: string;
  }