在 MUI v5 中使用带有芯片组件的自定义调色板颜色时出现打字稿错误答案

【问题标题】：Typescript error when using custom palette color with Chip component in MUI v5在 MUI v5 中使用带有芯片组件的自定义调色板颜色时出现打字稿错误
【发布时间】：2021-10-27 15:12:51
【问题描述】：

我有一个自定义主题，我在其中向调色板添加了自定义颜色。我希望 color 道具可以使用自定义颜色。我用 Button 组件进行了测试，它运行良好。但是，当我尝试对 Chip 组件执行相同操作时，我收到了 TypeScript 错误：

TypeError: Cannot read properties of undefined (reading 'type')

这就是我的主题的样子：

const theme = createTheme({
  palette: {
    slate: {
      darker: "#11161A",
      dark: "#1F2932",
      main: "#2E3D49",
      light: "#6D7780",
      lighter: "#B4B9BD",
      lightest: "#F7F7F8",
    }
  }
});

export default theme;

declare module "@mui/material/styles" {
  interface PaletteColor {
    lightest?: string;
    lighter?: string;
    darker?: string;
  }

  interface PaletteOptions {
    slate: any;
  }
}

declare module "@mui/material/Button" {
  interface ButtonPropsColorOverrides {
    slate: true;
  }
}

declare module "@mui/material/Chip" {
  interface ChipPropsColorOverrides {
    slate: true;
  }
}

还有什么想法？

【问题讨论】：

您的代码和框没有任何内容。

标签： reactjs typescript material-ui

【解决方案1】：

您的自定义颜色中缺少contrastText。从source开始，当Chip颜色不是default时，使用theme.palette[chipColorProp].main作为背景色，theme.palette[chipColorProp].contrastText作为前景色：

const theme = createTheme({
  palette: {
    slate: {
      darker: '#11161A',
      dark: '#1F2932',
      main: '#2E3D49',
      light: '#6D7780',
      lighter: '#B4B9BD',
      lightest: '#F7F7F8',
      contrastText: '#ffffff', // <------------------ Add this line to fix
    },
  },
});

【讨论】：