无法在TypeScript的Material UI主题上自定义调色板类型 [英] Can't customize color palette types on Material UI theme in TypeScript

问题描述

我创建了一个类型界面，以向面板添加自定义属性，如下所示:

I create a type interface to add custom properties to the Palette like so:

declare module @material-ui/core/styles/createMuiTheme {
  interface PaletteColor {
    transparent?: string;
    gradient?: PaletteColor;
  }
  interface Palette {
    gradient?: PaletteColor;
    transparent?: PaletteColor;
    secondary?: {
      transparent?: string;
    }
  }

  interface PaletteColorOptions {
    main?:string;
    dark?:string;
    light?:string;
    transparent?: string;
    gradient?: string;
    test?: string
  }
}

我正在尝试许多接口来使其正常工作...

I am trying to a lot of interfaces to get it to work...

然后我在主题中使用这些类型，如下所示:

Then I use those types in my theme like this:

export default function createMyTheme(options: ThemeOptions) {
    return createMuiTheme({
      ...options,
    })
  }

我使用该函数通过导入并调用它来创建我的主主​​题:

I use that function to create my main theme by importing it and calling it:

const theme = createMyTheme({});

然后我将组件样式设置为:背景:theme.palette.gradient.main，

And then I set my component style like this: background: theme.palette.gradient.main,

它告诉我:

Property 'gradient' does not exist on type 'Palette'.

环境:"@ material-ui/core":"^ 4.9.2"，反应":"^ 16.12.0"，"typescript":"^ 3.7.5"

Environment: "@material-ui/core": "^4.9.2", "react": "^16.12.0", "typescript": "^3.7.5"

这是我的完整主题:

const theme = createMyTheme({
  palette: {
    primary: {
      main: '#5FB9A6',
      dark: 'linear-gradient(-68deg, #151E27 , #335850)',
      gradient: 'linear-gradient(-68deg, #151E27 , #335850)'
    },
    secondary: {
      main: '#C68A77',
      transparent: 'rgba(198, 138, 119, 0.7)'
    },
    error: {
      light: '#e5a0a0',
      main: '#CD5C5C',
      dark: '#992c2c',
    },
    text: {
      primary:'#20383C',
      secondary: '#151E27',
      hint: 'rgba(32, 56, 60, 0.7)'
    },
    background: {
      paper: '#fff'
    },
    common: {
      white: "#FFF"
    }
  },
  typography: {
     fontFamily: '"Work Sans"'
  }

任何帮助将不胜感激！谢谢！

Any help would be greatly appreciated! Thanks!

推荐答案

根据文档，您需要模块扩充才能向面板添加自定义属性.

According to the documentation you need module augmentation to add custom properties to the palette.

我所做的是:

在根目录(与 App.tsx 相同的目录)中创建文件 expanded-theme.ts

Created a file expanded-theme.ts in the root directory (same directory where App.tsx is)

import '@material-ui/core/styles';

declare module '@material-ui/core/styles/createPalette' {
  interface Palette {
    myCustomColor?: Palette['primary'];
  }
  interface PaletteOptions {
    myCustomColor?: PaletteOptions['primary'];
  }
}

然后在 App.tsx 中定义了这个新属性(无需在 App.tsx expanded-theme.ts > ...)

And then in App.tsx I defined this new property (I did not need to import expanded-theme.ts in App.tsx...)

import React from 'react';
import { createMuiTheme, MuiThemeProvider } from '@material-ui/core';

// ...

const theme = createMuiTheme({
  palette: {
    myCustomColor: {
      main: 'blue'
    }
  }
});

// ...

现在，您可以在样式中使用 myCustomColor 了:).

Now you can use myCustomColor in your styles :).

这篇关于无法在TypeScript的Material UI主题上自定义调色板类型的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！