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

Question

我是反应和打字稿的新手。我正在尝试在全局主题上扩展调色板。

在我的 themeConitainer.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

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

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

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

Answer 2

在 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 3

简而言之，你不能（也不应该）这样做。

长答案包含以下解释：

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

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

作为材料设计的一部分，您拥有颜色系统，其中包含主要/次要（以及每个颜色的变体）。
您还可以控制深色/浅色主题，并且每个主题也都有主要/次要颜色。

如果您需要更多颜色 - 您可能不遵循材料设计的理念。

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