MUI v5自定义调色板遇TypeScript类型错误求助

你已经扩展了主题的Palette和PaletteOptions，但Button组件的color属性类型并未包含自定义的my_custom_color，导致类型校验失败。需要额外扩展Button的颜色覆盖类型来解决。

完整主题配置代码 #

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

export default createTheme({
  palette: {
    my_custom_color: {
      main: "#e82020"
    }
  }
});

declare module "@mui/material/styles" {
  interface Palette {
    my_custom_color: Palette["primary"];
  }

  interface PaletteOptions {
    my_custom_color: PaletteOptions["primary"];
  }
}

// 扩展Button组件的color属性允许值
declare module '@mui/material/Button' {
  interface ButtonPropsColorOverrides {
    my_custom_color: true;
  }
}

关键说明 #

• 新增的ButtonPropsColorOverrides扩展，是让TypeScript认可my_custom_color作为Button组件color属性的合法值。
• 若要在其他组件（如Chip、IconButton）使用该自定义颜色，需对应扩展各自的PropsColorOverrides接口，例如ChipPropsColorOverrides、IconButtonPropsColorOverrides，写法与Button一致。

正确使用示例 #

<ThemeProvider theme={theme}>
  <Button variant="contained" color="my_custom_color">自定义颜色按钮</Button>
</ThemeProvider>

内容的提问来源于stack exchange，提问作者Darab Ahmed