如何从Material UI调色板颜色名称获取颜色代码？

问题背景 #

自定义了Styled Badge组件PulsingBadge，希望通过color属性像原生Badge一样自定义样式，但遇到以下问题：

• 直接使用background: color会编译成background: warning这类不被浏览器识别的字符串
• 使用alpha(color, 0.5)时报错：MUI: Unsupported 'warning' color...
• 尝试theme.palette[color]时，因color可能为undefined出现TypeScript错误：Type 'undefined' cannot be used as an index

解决方案 #

方法1：在Styled组件中安全访问主题调色板 #

通过类型定义和默认值处理，确保color的合法性，再安全获取对应颜色值：

import { styled, Badge, Theme, alpha } from '@mui/material';

// 限制color为调色板的有效键类型
type PulsingBadgeProps = {
  color?: keyof Theme['palette'];
};

const PulsingBadge = styled(Badge)<PulsingBadgeProps>(({ theme, color = 'primary' }) => {
  // 安全获取颜色，提供默认 fallback
  const targetColor = theme.palette[color] || theme.palette.primary;
  
  return {
    '& .MuiBadge-badge': {
      background: targetColor.main,
      boxShadow: `0 0 0 2px ${theme.palette.background.paper}`,
      '&::after': {
        position: 'absolute',
        top: 0,
        left: 0,
        width: '100%',
        height: '100%',
        borderRadius: '50%',
        animation: 'ripple 1.2s infinite ease-in-out',
        border: `1px solid ${alpha(targetColor.main, 0.3)}`,
        content: '""',
      },
    },
    '@keyframes ripple': {
      '0%': {
        transform: 'scale(.8)',
        opacity: 1,
      },
      '100%': {
        transform: 'scale(2.4)',
        opacity: 0,
      },
    },
  };
});

方法2：函数组件内通过useTheme获取颜色 #

如果在组件逻辑中需要直接获取颜色代码，可结合useTheme钩子和可选链操作符：

import { useTheme } from '@mui/material';

function DemoComponent() {
  const theme = useTheme();
  const selectedColor = 'warning';
  // 安全获取十六进制颜色值，带默认 fallback
  const hexColor = theme.palette[selectedColor]?.main || theme.palette.primary.main;

  return <PulsingBadge color={selectedColor} />;
}

关键注意事项 #

• 给color属性定义严格类型keyof Theme['palette']，避免传入无效颜色名称
• 给color设置默认值（如primary），从根源避免undefined问题
• 使用可选链?.或条件判断访问theme.palette[color]，同时提供备选颜色防止异常

内容的提问来源于stack exchange，提问作者Maëlle