如何通过属性名称字符串获取对应调色板颜色值？

要实现从字符串形式的嵌套属性路径（如"ywpYellow.main"）获取颜色值，核心是拆解路径并逐层访问颜色对象，直接通过对象[key]的方式无法识别嵌套路径，下面是具体实现步骤：

1. 编写嵌套属性获取工具函数 #

创建一个通用工具函数，用来根据点分隔的路径字符串，从对象中取出对应值：

// utils.js
export const getNestedColor = (colorObj, path) => {
  return path.split('.').reduce((acc, key) => {
    return acc?.[key] ?? null;
  }, colorObj);
};

这个函数会把路径字符串按.分割成数组，然后通过reduce逐层遍历颜色对象，最终拿到目标颜色值。

2. 在组件中使用工具函数 #

在SidenavCollapse组件中，导入你的颜色对象和工具函数，传入路径字符串即可获取颜色：

// SidenavCollapse.js
import colors from './colors';
import { getNestedColor } from './utils';

const SidenavCollapse = ({ item }) => {
  // item.badgeColor 就是 routes.js 中定义的 "ywpYellow.main"
  const badgeColor = getNestedColor(colors, item.badgeColor);

  return (
    // 示例：用获取到的颜色设置徽章背景
    <span style={{ backgroundColor: badgeColor, padding: '2px 6px', borderRadius: '8px' }}>
      徽章
    </span>
  );
};

为什么之前的方法无效？ #

• palette[badgeColor]：相当于直接访问palette["ywpYellow.main"]，但你的颜色对象里并没有名为"ywpYellow.main"的属性，只有palette.ywpYellow这个子对象，所以取不到值。
• colors[badgeColor].main：同样是错误的路径访问，colors["ywpYellow.main"]本身就是undefined，再访问.main会报错。
• 数组形式：如果没做对应的路径解析逻辑，数组也无法直接映射到嵌套属性。

注意事项 #

• 不推荐使用eval(item.badgeColor)来获取值，这种方式存在安全风险（若路径字符串被篡改可能执行恶意代码）。
• 如果你的颜色对象是集成在UI库的Theme中（比如Material-UI的theme.palette），只需把工具函数的第一个参数换成theme.palette即可。

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