如何使用 Typescript 在 Material UI 中扩展调色板 [英] How can I extend Color Palette in Material UI with Typescript

问题描述

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

I am new on react and typescript. I am trying to extend the color palette on a global theme.

在我的 themeContainer.tsx 中

in my 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;

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

but on my component, there was an error.

此调用没有过载.

提前谢谢你.

推荐答案

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

not 100% sure in TS, but it works for me like this:

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-主题

Find a brief introduction at the projekt homepage: https://material-ui.com/guides/typescript/#customization-of-theme

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

这篇关于如何使用 Typescript 在 Material UI 中扩展调色板的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！