如何扩展 material ui 主题类型并修改 Typescript 中的现有类型？

Question

我知道我们可以扩展 material ui theme 类型并添加新的属性如 this:

例如添加 appDrawer 将是这样的：

declare module '@material-ui/core/styles/createMuiTheme' {
  interface Theme {
    appDrawer: {
      width: React.CSSProperties['width']
      breakpoint: Breakpoint
    }
  }
  // allow configuration using `createMuiTheme`
  interface ThemeOptions {
    appDrawer?: {
      width?: React.CSSProperties['width']
      breakpoint?: Breakpoint
    }
  }
}

但我的问题是如何修改现有属性，例如我想将 palette 的 grey 属性更改为如下所示：

createMuiTheme({
  palette: {
    grey: {
      light: "#f7f7f7",
      main: "#e1e1e1",
      dark: "#c2c2c2"
    }
  })

但是上面的代码会给我这个错误：

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

所以我想扩展 grey 颜色以接受这些值 { light: string; main: string; dark: string; }

如有任何帮助，我们将不胜感激

Answer 1

我刚刚使用了一个解决方法，将我所有的自定义属性放在一个 custom 键中，如下所示：

declare module "@material-ui/core/styles/createMuiTheme" {
  interface Theme {
    custom?: {
      palette?: {
        grey?: PaletteColorOptions;
      };
    };
    newProp?: whateverTypeItIs
  }
  // allow configuration using `createMuiTheme`
  interface ThemeOptions {
    custom?: {
      palette?: {
        grey?: PaletteColorOptions;
      };
    };
    newProp?: whateverTypeItIs
  }
}

如何扩展 material ui 主题类型并修改 Typescript 中的现有类型？

how can I extend material ui theme type and modify existing types in Typescript?

typescript

reactjs

material-design

material-ui