无法在 TypeScript 中自定义 Material UI 主题的调色板类型

Question

我创建了一个类型接口来向 Palette 添加自定义属性，如下所示：

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
  }
}

我正在尝试很多接口以使其正常工作...

然后我像这样在我的主题中使用这些类型：

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

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

const theme = createMyTheme({});

然后我像这样设置我的组件样式： 背景：theme.palette.gradient.main,

它告诉我这个：

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

环境： "@material-ui/core": "^4.9.2", “反应”：“^16.12.0”， “打字稿”：“^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"'
  }

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

Answer 1

根据您需要module augmentation 向调色板添加自定义属性的文档。

我所做的是：

在根目录（与App.tsx所在的目录相同）中创建了一个文件expanded-theme.ts

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

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

接下来，您可以在您的主题中定义自定义属性（我不需要导入expanded-theme.ts）

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

// ...

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

// ...

<MuiThemeProvider theme={theme}>

//...

现在您可以在自己的样式中使用myCustomColor :)。

Answer 2

我也在努力让它发挥作用，但我错过了一些非常基本的东西。 declare module '@material-ui/core/styles/createMuiTheme' 的代码实际上在哪里？我尝试创建一个types.d.ts 文件，然后在我的条目index.js 文件中，我将它包括在内： import './config/types.d';

...但是我仍然遇到与您相同的类型错误。至于你上面的例子，看起来 MUI 的例子在'@material-ui/core/styles/createMuiTheme' 周围有引号，但你的代码没有。此外，他们的示例显示实际从 MUI 导入模块，然后对其进行修改。最后，您的代码看起来是自引用的（例如，PaletteColor 界面中的渐变定义也是 PaletteColor）。不过，我不知道这些事情是否真的有问题。

我的types.d.ts 文件如下所示：

import { Palette } from '@material-ui/core/styles/createMuiTheme';
//https://material-ui.com/guides/typescript/#customization-of-theme
declare module '@material-ui/core/styles/createMuiTheme' {
  interface Palette {
    background: {
      appSubHead: string;
    };
  }

  interface PaletteOptions {
    background?: {
      appSubHead?: string;
    };
  }
}

Answer 3

我正在使用带有 create-react-app 和 typescript 的 material-ui。导入调色板对我有用。

import { Palette } from '@material-ui/core/styles/createPalette'