无法在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屋!