如何在Chakra-UI主题与React组件中统一使用自定义品牌色？

问题根源是你在colors.js里定义的myBrand没有正确挂载到Chakra主题的颜色命名空间中，导致Chakra的样式解析器无法识别这个自定义颜色名称。按以下步骤调整配置即可全局统一使用：

1. 修正colors.js的结构 #

在theme/foundations/colors.js里，要把自定义品牌颜色直接作为colors对象的属性，让Chakra能识别完整的命名路径：

// theme/foundations/colors.js
export const colors = {
  // 自定义基础调色板
  myBlue: '#1a73e8',
  myYellow: '#fbbc05',
  // 品牌颜色组，直接挂载到colors根对象
  myBrand: {
    blue: '#1a73e8',
    clickable: '#1967d2' // 可点击状态的品牌色
  }
}

2. 正确扩展主题 #

在theme/index.js中确保将自定义colors传入extendTheme：

// theme/index.js
import { extendTheme } from '@chakra-ui/react'
import { colors } from './foundations/colors'
import { globalStyles } from './global'

const theme = extendTheme({
  colors,
  styles: {
    global: globalStyles
  }
})

export default theme

3. 全局样式中使用自定义颜色 #

此时在global.js里可以直接用完整的颜色命名路径，不需要单独导入变量：

// theme/global.js
export const globalStyles = {
  a: {
    color: 'myBrand.clickable',
    _hover: {
      color: 'myBrand.blue'
    }
  }
}

4. React组件中使用自定义颜色 #

组件里的useColorModeValue也能正常识别自定义颜色名称了：

import { useColorModeValue } from '@chakra-ui/react'

function MyLink() {
  const linkColor = useColorModeValue('myBrand.clickable', 'myBrand.blue')
  return <a color={linkColor}>测试链接</a>
}

关键提醒 #

Chakra的颜色解析器仅识别theme.colors下的一级或二级属性，自定义颜色必须遵循theme.colors.[颜色组].[具体颜色]的路径结构，过深的嵌套或未直接挂载的结构都会导致无法识别。

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