使用 Typescript 将属性添加到 Material-UI 中 createMuiTheme 中的背景道具 [英] Add property to background prop in createMuiTheme in Material-UI using Typescript

问题描述

我正在尝试在 createMuiTheme 中添加一个新属性.但是打字稿不让我做.

I'm trying to add a new property inside the createMuiTheme. But Typescript don't let me do.

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

I followed the instructions here : https://next.material-ui.com/guides/typescript/#customization-of-theme

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

I created a .ts file where I put this :

import * as React from 'react';

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

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

And, this where I create the Material-UI theme :

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 团队的示例，它可以工作，但不是我的代码.我找不到原因.我可能应该错过一些东西.

Even so I tried the example from the material-ui team, it's work, but not my code. I can't find why. I should probably missing something.

我正在使用界面TypeBackground"；因为它在material-ui的createPalette.d.ts文件中是这样命名的.

I am using the interface "TypeBackground" because it is named like that in the createPalette.d.ts file from material-ui.

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

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

So I tried to do the same. I thought it was the same as adding props to palette property.

谢谢！

推荐答案

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

Ok, so I just found a solution. But I don't really understand why is it working.

我修改了声明模块"；行:

I modified the "declare module" line :

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

我刚刚添加了createPalette"样式之后.现在它可以工作了，我就是不明白为什么 ^^!

I just added "createPalette" after styles. Now it's working, I just can't figure out why ^^!

这篇关于使用 Typescript 将属性添加到 Material-UI 中 createMuiTheme 中的背景道具的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！