如何使用 Typescript 在 Material UI 中扩展调色板

Question

我是 react 和 typescript 的新手。 我正在尝试在全局主题上扩展调色板。

在我的 themeContainer.tsx 中

import { ThemeOptions } from '@material-ui/core/styles/createMuiTheme';

declare module '@material-ui/core/styles/createPalette' {
  // allow configuration using `createMuiTheme`
  interface Palette {
    accent: PaletteColor
  }
  interface PaletteOptions {
    accent: PaletteColorOptions,
    tertiary: PaletteColorOptions
  }
};

const ThemeContainer: React.FunctionComponent<Props> = (props, themeOptions: ThemeOptions) => {
  const { children } = props;

  const theme = useMemo(() => {
    const nextTheme = createMuiTheme({
      ...themeOptions,
      palette: {
        accent: {
          main: '#ff0000'
        },
      }
    });

    return nextTheme;
  });

  return <ThemeProvider theme={theme}>{children}</ThemeProvider>;
};

export default ThemeContainer;

但是在我的组件上，出现了错误。

此调用没有过载。

提前谢谢你。

Answer 1

在 TS 中不是 100% 确定，但它对我来说是这样的：

declare module "@material-ui/core/styles/createPalette" {
  interface Palette {    
    lightWarning: Palette["primary"];
  }
  

  interface PaletteOptions {    
    lightWarning: PaletteOptions["primary"];
  } 

}

在 projekt 主页找到简要介绍： https://material-ui.com/guides/typescript/#customization-of-theme

或者在这篇文章中： https://medium.com/javascript-in-plain-english/extend-material-ui-theme-in-typescript-a462e207131f

Answer 2

对于使用 MUI 5 的用户，您可以使用自定义类型覆盖 Palette 和 PaletteOptions，然后使用现有类型扩展这些接口：

import {
  Palette as MuiPallete,
  PaletteOptions as MuiPaletteOptions,
} from '@mui/material/styles/createPalette';

declare module '@mui/material/styles/createPalette' {
  interface Palette extends MuiPallete {
    neutralShade: {main: string};
  }

  interface PaletteOptions extends MuiPaletteOptions {
    neutralShade?: {main: string};
  }
}

Answer 3

简短的回答是您不能（也不应该）这样做。

长答案包含以下解释：

Material UI 是 React 对 Material Design 概念的实现之一。

Material Design 是 Google 于 2014 年开发的一种设计语言。在 Google Now 首次亮相的“卡片”主题的基础上，Material Design 使用了更多基于网格的布局、响应式动画和过渡、填充和深度效果，例如灯光和阴影。

作为 Material Design 的一部分，您拥有 color system，其中包含一个主要/次要（以及它们每个的变体）。
您还可以控制深色/浅色主题，并且它们中的每一个都有原色/次要颜色。

如果您需要更多颜色 - 您可能不遵循 Material Design 的理念。

您始终可以使用 CSS/Variables/Styled 组件来获得额外的设计选项，但通常不应该这样做。