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

IT技术 reactjs typescript material-ui
2021-05-07 12:28:54

我创建了一个类型接口来向 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”，“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"'
  }

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

3个回答

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

我所做的是：

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

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在您的样式中使用:)。

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

...但我仍然遇到与您相同的类型错误。至于你上面的例子，看起来 MUI 的例子在 周围有引号'@material-ui/core/styles/createMuiTheme'，但你的代码没有。此外，他们的示例显示实际从 MUI 导入module，然后进行修改。最后，您的代码看起来是自引用的（例如，接口 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;
    };
  }
}

我正在将 material-ui 与 create-react-app 和 typescript 一起使用。导入调色板对我有用。

import { Palette } from '@material-ui/core/styles/createPalette'
其它你可能感兴趣的问题
上一篇ReferenceError: localStorage 未在 ReactJS Build 中定义 下一篇不断让 [WDS] 断开连接！错误，ReactJs，Webpack