修改MaterialUI默认secondary颜色后，Outlined按钮抛出decomposeColor错误

问题说明 #

在MUI V5.10.0版本中，自定义secondary调色板颜色后，使用variant="outlined"的Button组件会触发decomposeColor相关错误。

按钮代码 #

<Button variant="outlined"> 返回 </Button>

错误详情 #

抛出错误：TypeError: Cannot read properties of undefined (reading 'type')，错误触发点为decomposeColor函数。

初始主题调色板配置 #

// Theme.ts > createTheme > Palette
secondary: {
   light: '#19857b',
   dark: '#19857b',
   main: '#19857b',
   contrastText: "#19857b"
},

已尝试的解决方式 #

• 定义A100、A200等颜色色阶
• 使用augmentColor工具：const { palette: { augmentColor } } = createTheme();
• 定义main、dark、textContrast等颜色变体

完整主题代码 #

import { createTheme } from '@mui/material/styles';
import { red } from '@mui/material/colors';
import "@mui/material/styles/createPalette";

declare module '@mui/material/styles' {
  interface TypographyVariants {
    heading: React.CSSProperties;
    subheading?: React.CSSProperties;
    article?: React.CSSProperties;
    caption?: React.CSSProperties;
    blockquote?: React.CSSProperties;
  }

  // 允许通过createTheme配置自定义变体
  interface TypographyVariantsOptions {
    heading?: React.CSSProperties;
    subheading?: React.CSSProperties;
    article?: React.CSSProperties;
    caption?: React.CSSProperties;
    blockquote?: React.CSSProperties;
  }
}

// 更新Typography组件的variant属性选项
declare module '@mui/material/Typography' {
  interface TypographyPropsVariantOverrides {
    heading: true;
    subheading: true;
    h3: false;
  }
}
declare module '@mui/material/styles' {
  interface Palette {
    accent: Palette['primary'];
  }

  interface PaletteOptions {
    accent: PaletteOptions['primary'];
  }
}
declare module '@mui/material/Button' {
  interface ButtonPropsColorOverrides {
    accent: true
  }
}

const { palette: { augmentColor } } = createTheme();
const createColor = (base: string) => augmentColor({ color: { main: base } });

const theme = createTheme({
  typography: {
    fontFamily: ["Inter", 'sans-serif'].join(","),
    heading: { color: "black" },
    subheading: { color: "black" },
    article:  { color: "black" },
    caption: {},
    blockquote: { color: "black" },
  },
  palette: {
    mode: 'light',
    primary: createColor("#556cd6"),
    secondary: createColor("#19857b"),
    accent: createColor("#e5e7eb"),
    error: createColor(red.A400),
  },
  // 自定义组件默认配置
  components: {
    MuiSkeleton: {
      defaultProps: {
        animation: "wave",
      }
    },
    MuiPaper: {
      defaultProps: {
        square: false
      }
    },
    MuiButton: {
      defaultProps: {
        variant: "contained",
        color: "secondary"
      },
    },
    MuiInputBase: {
      defaultProps: {
        size: "small"
      }
    },
    MuiFilledInput: {
      defaultProps: {
        disableUnderline: true,
      }
    },
    MuiOutlinedInput: {
      defaultProps: {
        notched: false,
      },
    },
  }
});

export default theme;

错误堆栈 #

错误调用链为：decomposeColor → getContrastRatio → getContrastText → createTypography → createTheme，最终触发TypeError: Cannot read properties of undefined (reading 'type')。

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