如何使用 mui v5 React Typescript 将自定义颜色作为道具？

Question

我希望向 MUI 按钮组件添加一个或多个自定义颜色属性值。我按照https://javascript.plainenglish.io/extend-material-ui-theme-in-typescript-a462e207131f进行操作，几乎成功了。我使用了在 createPalette.d.ts 文件中创建的自定义属性，但是当我尝试在自定义组件中使用它时，它会抛出错误，并且我无法使用自定义颜色。

遇到的错误：

我关注了Can't在 TypeScript 中自定义 Material UI 主题的调色板类型，Material UI 5.0 Typescript React Custom theme，如何使用 Typescript 扩展 Material-UI 主题？但没有运气。

但是，它在这里适用于 JavaScript 版本：Can you add an extra color in Material UI? 。但是，我无法遵循打字稿版本

由于有多个文件，我为其创建了一个沙箱。https://codesandbox.io/s/async-rgb-9m6ulo?file=/src/App.tsx

我怎样才能实现它？

Answer 1

将 appcolor 添加为您的可能类型ButtonPropsType.ts

type ButtonPropsType = {
  color?:
    | "inherit"
    | "primary"
    | "secondary"
    | "success"
    | "error"
    | "info"
    | "warning"
    | "appcolor"; //<-- Here
  disabled?: boolean;
  variant?: "text" | "outlined" | "contained";
};

或者，如果您想根据需要动态添加选项，mui 有一个接口。

ButtonPropsTypes.ts

import { ButtonProps } from "@mui/material";

type ButtonPropsType = {
  color?: ButtonProps["color"];
  disabled?: boolean;
  variant?: "text" | "outlined" | "contained";
};

export default ButtonPropsType;

createPalette.d.ts

import * as createPalette from "@mui/material/styles/createPalette";

declare module "@mui/material/styles/createPalette" {
  interface PaletteOptions {
    appcolor?: PaletteColorOptions;
  }
  interface Palette {
    appcolor: PaletteColor;
  }
}

declare module "@mui/material" {
  interface ButtonPropsColorOverrides {
    appcolor;
  }
}