如何在自定义MUI 5 Button变体中使用主题调色板颜色

你完全可以在主题声明内部直接使用已定义的主题颜色，不需要在主题包裹层做额外覆盖，报错是alpha函数的传值规则导致的。

问题原因 #

MUI 中只有组件样式配置的顶层 字符串格式的颜色路径（比如你写的backgroundColor: 'primary.light'）会被自动解析为主题调色板的值，但是alpha()函数本身不支持直接传入颜色路径字符串，它只能接收实际的十六进制/RGB等色值，所以会抛出不支持的颜色报错。

解决方法 #

方法1：提前抽离公共调色板变量（最简单） #

你可以先把调色板配置单独定义为常量，再在主题配置和alpha函数中直接引用这个常量即可，修改后的代码如下：

import { createTheme, Theme } from '@mui/material/styles';
import { alpha } from '@mui/material/styles';

declare module '@mui/material/Button' {
  interface ButtonPropsVariantOverrides {
    light: true;
  }
}

// 提前定义调色板常量
const palette = {
  primary: {
    main: 'black',
    light: 'white',
  },
  secondary: {
    main: 'gray',
    light: 'white',
  },
  info: {
    main: 'white',
  },
  warning: {
    main: 'red',
  },
} as const;

export const theme: Theme = createTheme({
  palette,
  typography: {
    fontFamily: 'Lato',
  },
  components: {
    MuiButton: {
      variants: [
        {
          props: { variant: 'light', color: 'primary' },
          style: {
            textTransform: 'none',
            border: 'none',
            backgroundColor: 'primary.light',
            color: 'primary',
            borderRadius: 8,
            '&:hover': {
              // 直接引用提前定义的调色板变量
              backgroundColor: alpha(palette.primary.main, 0.16),
              '&:active': {
                backgroundColor: alpha(palette.primary.main, 0.32),
              },
            },
          },
        },
      ],
    },
  },
});

方法2：使用样式回调获取主题上下文 #

如果你的颜色逻辑更复杂，需要依赖已经生成的完整主题对象，可以把style字段改为接收theme为参数的函数，MUI会自动传入生成好的主题实例：

components: {
  MuiButton: {
    variants: [
      {
        props: { variant: 'light', color: 'primary' },
        // 用回调接收theme参数
        style: ({ theme }) => ({
          textTransform: 'none',
          border: 'none',
          backgroundColor: theme.palette.primary.light,
          color: theme.palette.primary.main,
          borderRadius: 8,
          '&:hover': {
            backgroundColor: alpha(theme.palette.primary.main, 0.16),
            '&:active': {
              backgroundColor: alpha(theme.palette.primary.main, 0.32),
            },
          },
        }),
      },
    ],
  },
}

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