如何使用Typescript扩展Material UI v5主题

e37o9pze 于 2023-05-23 发布在 TypeScript

关注(0)|答案(2)|浏览(145)

我知道这个问题以前也有人问过但 *

我想添加更多的颜色变体，如success，warning，并在background（palette.background）下添加更多的选项。比如lite。（需要这种颜色的工作与黑暗的主题太多）
我像这样延伸主题

declare module "@mui/material/styles/createPalette" {
  export interface PaletteOptions {
    preset?: {
      p1: string;
      p2: string;
    };
    background?: {
      b1: string,
      b2: string
    }
  }
}

但得到以下错误：

TS2717: Subsequent property declarations must have the same type. Property 'background' must be of type 'Partial<TypeBackground> | undefined', but here has type '{ b1: string; b2: string; } | undefined'.

在这种情况下如何正确扩展MUI主题

typescript

来源：https://stackoverflow.com/questions/73904865/how-to-extent-material-ui-v5-theme-with-typescript

2条答案

按热度按时间

6jjcrrmo1#

就像Cody Duong回答How to have custom colors as props with mui v5 react typescript?一样，你可以按照同样的方法来定制颜色变体 prop 。
如果选中错误消息，PaletteOptions已经具有背景属性为

export interface PaletteOptions {
  primary?: PaletteColorOptions;
  secondary?: PaletteColorOptions;
  error?: PaletteColorOptions;
  warning?: PaletteColorOptions;
  info?: PaletteColorOptions;
  success?: PaletteColorOptions;
  mode?: PaletteMode;
  tonalOffset?: PaletteTonalOffset;
  contrastThreshold?: number;
  common?: Partial<CommonColors>;
  grey?: ColorPartial;
  text?: Partial<TypeText>;
  divider?: string;
  action?: Partial<TypeAction>;
  background?: Partial<TypeBackground>;
  getContrastText?: (background: string) => string;
}

其中背景类型为

export interface TypeBackground {
  default: string;
  paper: string;
}

这就是为什么你会得到
TS2717: Subsequent property declarations must have the same type. Property 'background' must be of type 'Partial<TypeBackground> | undefined', but here has type '{ b1: string; b2: string; } | undefined'.错误
我将在未来尝试用一个明确的解决方案编辑这个答案。但是，至少现在，我能给予你一个想法。保持编码;）

赞(0）回复(0）举报 2023-05-23

d5vmydt92#

declare module '@mui/material/styles' {
  interface TypeBackground {
    b1: string,
    b2: string
  }
}

赞(0）回复(0）举报 2023-05-23

我来回答

如何使用Typescript扩展Material UI v5主题

2条答案

相关问题

热门标签

最新问答