TypeScript/React/MUI Button自定义颜色类型报错解决方案

报错核心原因 #

仅完成了主题Palette的模块扩展，未扩展Button组件color属性的合法值类型，TypeScript无法识别自定义色值为Button组件的合法入参，因此抛出类型不匹配错误。
同时现有主题配置存在字段位置错误，会导致tonalOffset配置不生效。 #

修复步骤 #

• 补全类型声明
  在现有类型扩展代码基础上，追加Button组件的颜色类型覆盖，同时修正Palette接口的可选标记错误：

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

declare module '@mui/material/styles' {
    interface Palette {
        // 这里不要加可选标记，主题生成时会自动补全light/dark等衍生色值，字段为必存在项
        play: Palette['primary'];
        moreInfo: Palette['primary'];
    }
    interface PaletteOptions {
        play?: PaletteOptions['primary'];
        moreInfo?: PaletteOptions['primary'];
    }
}

// 追加以下代码，扩展Button组件支持的color属性合法值
declare module '@mui/material/Button' {
  interface ButtonPropsColorOverrides {
    play: true;
    moreInfo: true;
  }
}

• 修正主题配置字段位置
  tonalOffset是主题级配置，不属于palette下的子字段，需要移到和palette、breakpoints平级的位置，否则配置不会生效：

const theme = createTheme({
  tonalOffset: 0.2,
  palette: {
    primary: {
      main: '#ff0000',
    },
    play: {
      main: '#ffffff',
      contrastText: 'black'
    },
    moreInfo: {
      main: '#6c6c6e',
      contrastText: 'white'
    },
  },
  breakpoints: {
    values: {
      xs: 0,
      sm: 600,
      md: 900,
      lg: 1200,
      xl: 1536,
    },
  },
});

临时绕过方案（不推荐生产环境使用） #

如果不需要严格类型校验，可以直接通过类型断言跳过TS检查：

<Button color={"play" as any}>操作按钮</Button>

报错参考截图 #

#

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