如何通过名称获取Chakra UI主题色对应的hex十六进制色值？

Chakra UI 原生提供了对应能力，无需自行维护色值映射表即可实现传入主题色标识返回对应hex色值的需求，分两种使用场景：

• React组件上下文场景（在ChakraProvider包裹的组件树内使用）
  直接调用官方内置的useToken Hook即可，封装成你需要的getHexValue形式示例如下：

  import { useToken } from '@chakra-ui/react'
  
  const getHexValue = (colorKey) => {
    const [hexValue] = useToken('colors', [colorKey])
    return hexValue
  }
  
  // 调用效果
  getHexValue("gray.300") // 返回 "#CBD5E0"
  

• 非组件上下文场景（在普通工具函数、公共脚本等脱离React组件树的位置使用）
  直接导入项目实际使用的Chakra主题对象，按路径读取色值即可，示例如下：

  // 如果你做了主题自定义，这里替换为你项目传给ChakraProvider的自定义主题对象即可
  import { theme } from '@chakra-ui/react'
  
  // 内置按路径取值工具，无需额外引入第三方依赖
  const getNestedValue = (obj, path) => {
    return path.split('.').reduce((acc, key) => acc?.[key], obj)
  }
  
  const getHexValue = (colorKey) => {
    return getNestedValue(theme.colors, colorKey)
  }
  
  // 任意位置调用都可生效
  console.log(getHexValue("gray.300")) // 输出 "#CBD5E0"
  

注意：如果你修改过Chakra默认主题、新增了自定义色板，非组件场景下必须导入项目实际生效的自定义主题对象，不能用官方默认导出的theme，否则会取到未修改的默认色值。

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