React MUI自定义Alert组件颜色报错：Cannot read properties of undefined (reading 'type')

问题描述 #

为匹配公司风格定制MUI组件，已定义自定义颜色（需求用danger而非error），按照MUI官方文档操作时，Button组件可正常使用该自定义颜色，但Alert组件使用相同方法却抛出错误：

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

在官方文档对应的示例中测试也得到相同结果，相关代码如下：

import * as React from 'react';
import { createTheme, ThemeProvider } from '@mui/material/styles';
import Button from '@mui/material/Button';
import Alert from '@mui/material/Alert';

const theme = createTheme({
  palette: {
    neutral: {
      main: '#64748B',
      contrastText: '#fff',
    },
  },
});

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

  // allow configuration using `createTheme`
  interface PaletteOptions {
    neutral?: PaletteOptions['primary'];
  }
}

// Update the Button's color prop options
declare module '@mui/material/Button' {
  interface ButtonPropsColorOverrides {
    neutral: true;
  }
}

declare module '@mui/material/Alert' {
  interface AlertPropsColorOverrides {
    neutral: true;
  }
}

export default function CustomColor() {
  return (
    <ThemeProvider theme={theme}>
      <Button color="neutral" variant="contained">
        neutral
      </Button>
      <Alert color="neutral">ALERT</Alert>
    </ThemeProvider>
  );
}

问题原因 #

Alert组件的颜色逻辑和Button不同：Button直接调用调色板中的颜色对象，而Alert依赖调色板中对应颜色对象的type属性（内置的success/error等颜色会自动包含该属性，用来关联状态样式）。仅扩展Palette和AlertPropsColorOverrides不足以让Alert识别自定义颜色，因为Alert的样式生成逻辑需要完整的颜色类型映射。

解决方法 #

需要通过augmentColor方法生成符合MUI规范的颜色对象，同时扩展必要的类型定义，让Alert能正确读取到颜色的状态属性。具体修改如下：

1. 完善类型扩展 #

补充TypeBackground接口，让Alert能识别自定义颜色的背景类型：

declare module '@mui/material/styles' {
  interface Palette {
    neutral: PaletteColor;
  }

  interface PaletteOptions {
    neutral?: PaletteColorOptions;
  }

  interface TypeBackground {
    neutral?: string;
  }
}

2. 用augmentColor生成标准颜色对象 #

该方法会自动补充light/dark色调以及Alert需要的type属性：

import { createTheme, ThemeProvider, augmentColor } from '@mui/material/styles';

const theme = createTheme({
  palette: {
    neutral: augmentColor({
      color: { main: '#64748B', contrastText: '#fff' },
      name: 'neutral'
    }),
  },
});

修改后的完整代码 #

import * as React from 'react';
import { createTheme, ThemeProvider, augmentColor } from '@mui/material/styles';
import Button from '@mui/material/Button';
import Alert from '@mui/material/Alert';

const theme = createTheme({
  palette: {
    neutral: augmentColor({
      color: { main: '#64748B', contrastText: '#fff' },
      name: 'neutral'
    }),
  },
});

declare module '@mui/material/styles' {
  interface Palette {
    neutral: PaletteColor;
  }

  interface PaletteOptions {
    neutral?: PaletteColorOptions;
  }

  interface TypeBackground {
    neutral?: string;
  }
}

declare module '@mui/material/Button' {
  interface ButtonPropsColorOverrides {
    neutral: true;
  }
}

declare module '@mui/material/Alert' {
  interface AlertPropsColorOverrides {
    neutral: true;
  }
}

export default function CustomColor() {
  return (
    <ThemeProvider theme={theme}>
      <Button color="neutral" variant="contained">
        neutral
      </Button>
      <Alert color="neutral">ALERT</Alert>
    </ThemeProvider>
  );
}

关键说明 #

• augmentColor是MUI提供的工具方法，能基于基础颜色生成符合组件样式要求的完整颜色结构，自动补全Alert需要的type属性。
• 扩展TypeBackground是为了让Alert的背景样式能正确关联到自定义颜色，避免出现样式缺失的问题。

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