相关疑难解决方法(0)

我创建一个类型接口来将自定义属性添加到调色板，如下所示：

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({});

然后我像这样设置组件样式：background：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', …

我已经有一个我正在尝试在 Material UI 中实现的样式指南。我可以看到按钮的颜色道具采用以下选项：

| 'default'
| 'inherit'
| 'primary'
| 'secondary'

但是我需要一个额外的：

| 'default'
| 'inherit'
| 'primary'
| 'secondary'
| 'tertiary'

您能否在 Material UI 中创建一种与通用主题系统配合使用的新颜色？或者这不是真的应该如何使用它？

我在使用 TypeScript 在 Material UI 5.0 中自定义主题时遇到问题。

主题.ts

    import { createTheme } from '@mui/material';

declare module '@mui/material/styles' {
    interface Theme {
        custom: {
            buttonWidth: string;
        };
    }
    interface ThemeOptions {
        custom: {
            buttonWidth: string;
        };
    }
}

export const theme = createTheme({
    palette: {
        primary: {
            main: '#00F',
        },
    },
    typography: {
        body1: {
            fontFamily: 'Comic Sans',
        },
    },
    custom: {
        buttonWidth: '200px',
    },
});

export const CustomTheme= typeof theme;

但是当我尝试使用它时，它不起作用

// CustomTheme imported
<Button sx={{ width: (theme: CustomTheme) => …

Typescript 总是抱怨调色板中缺少某些属性。如果我添加//@ts-ignore，我的应用程序就可以正常工作，但我显然想避免这种情况。我是 Typescript 的新手，这是我尝试过的。

import createMuiTheme, { ThemeOptions, Theme } from '@material-ui/core/styles/createMuiTheme';
import { PaletteOptions } from '@material-ui/core/styles/createPalette';

interface IPaletteOptions extends PaletteOptions {
    chip: {
      color: string,
      expandIcon: {
        background: string,
        color: string,
      },
    },
}
interface ITheme extends Theme {
  palette: IPaletteOptions,
}

const theme: ITheme = createMuiTheme({
  typography: {
    fontWeightMedium: 600,
    fontFamily: ['Open Sans', 'Arial', 'sans-serif'].join(','),
  },
  palette: {
    primary: {
      main: '#43C099',
    },
    secondary: {
      main: '#7AF3CA',
    },
    chip: {
      color: '#C2C3C6',
      expandIcon: {
        background: …