使用material-ui@next 和 typescript 扩展主题

创建我的主题时material-ui我添加了两个新的调色板选项，为我提供了更好的明暗范围。我已经延长了Theme键入以表明这一点

import {Theme} from "material-ui/styles";
import {Palette} from "material-ui/styles/createPalette";

export interface ExtendedTheme extends Theme {
    palette: ExtendedPalette
}

export interface ExtendedPalette extends Palette {
    light: Color,
    dark: Color,
}

当我尝试在中使用这些附加选项时出现问题WithStyles渲染助手

const styles = (theme : ExtendedTheme) => ({ root: {color: theme.light['100'] }});

export interface MyProps {classes: {[index: string] : string}};
const MyComponent = (props : MyProps) => {...};

// Type ExtendedTheme is not assignable to Theme
export default withStyles(styles : StyleRulesCallback)(MyComponent);

从功能上讲，我的代码在纯 JavaScript 中运行良好，但由于类型不同，它会引发错误。 Material-ui 的类型期望为Theme作为样式回调函数的唯一参数：

export type StyleRulesCallback<ClassKey extends string = string> = (theme: Theme) => StyleRules<ClassKey>;

我认为扩展接口将以多态方式工作，以便ExtendedTheme将实施Theme

该问题可以使用以下方法解决模块增强 https://www.typescriptlang.org/docs/handbook/declaration-merging.html#module-augmentation:

declare module '@material-ui/core' {
  interface Theme {
    colors: {
      success: {
        dark: string,
        light: string,
      }
    }
  }
}

此外，您可以在 App 组件中声明该模块，并将子组件包装在ThemeProvider:

import { createMuiTheme, ThemeProvider, colors, ThemeOptions } from '@material-ui/core';

declare module '@material-ui/core' {
  interface Theme {
    colors: {
      success: {
        dark: string,
        light: string,
      }
    }
  }
}

const App = () => {
  const theme = createMuiTheme({
    colors: {
      success: {
        dark: colors.green[600],
        light: colors.green[300],
      },
    } as ThemeOptions,
  });

  return (
    <ThemeProvider theme={theme}>
     <a href="https://material-ui.com/customization/theming/">Theming</a>
    </ThemeProvider>
  )