如何使用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.

在我的themeConitainer.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"];
  } 

}

在项目主页上找到简短的介绍:https://material-ui.com/guides/typescript/#customization-主题

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

或者在本文中:https://medium.com/javascript-in-plain-english/extended-material-ui-theme-in-typescript-a462e207131f

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