如何降低MUI调色板元素的透明度以适配自定义组件需求？

实现思路 #

• 通过MUI提供的useTheme钩子获取当前主题实例，可直接读取调色板所有属性对应的实际颜色值
• 配合MUI官方内置的alpha工具函数，可直接对任意合法颜色值设置透明度，无需自行拆分R/G/B通道
• 对传入的color属性做路径解析，即可支持primary.main这类调色板属性字符串的读取

完整实现代码 #

import { useTheme, alpha } from '@mui/material/styles';
import get from 'lodash.get'; // 若不想引入lodash可使用下文的简易路径读取逻辑

const ColoredMarker = ({ color, children }) => {
  const theme = useTheme();
  // 兼容两种入参：直接传hex/rgb值、传调色板路径字符串
  const rawColor = get(theme.palette, color) || color;
  // 生成透明度为0.1的背景色
  const bgColor = alpha(rawColor, 0.1);

  return (
    <span style={{
      color: rawColor,
      backgroundColor: bgColor,
      padding: '0 3px',
      borderRadius: '2px'
    }}>
      {children}
    </span>
  );
};

// 调用方式和要求完全匹配
// <ColoredMarker color="primary.main">I'm supposed to be purple</ColoredMarker>

常见问题说明 #

之前alpha函数不生效的核心原因是直接传入了primary.main这类调色板路径字符串，该函数无法识别MUI调色板属性，必须先解析为实际的hex/rgb格式颜色值后再传入即可正常工作。
如果不想引入lodash，可以使用下面的简易路径读取逻辑替换lodash.get：

const getPaletteColor = (palette, path) => {
  return path.split('.').reduce((current, key) => current?.[key], palette);
};
// 调用方式：const rawColor = getPaletteColor(theme.palette, color) || color;

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