这是我第一次使用Chakra-UI，扩展了基本主题。按照他们的ScaleOut Your Project建议，我将内容分解成单独的文件，然后将它们包含在内，所以我有：

//theme/index.js
import { colors } from 'theme/foundations/colors';

const overrides = {
  colors
};

export default extendTheme(overrides);

然后我有我们广泛的调色板：

//theme/foundation/colors.js
export const colors = {
    myBlue: {
      50: '#e6f0ff',
      ...
      800: '#0b1e41', // My Blue
      900: '#010a1a'
    },
    myYellow: {
      50: '#fff4dc',
      ...
      400: '#f4a224', // My Yellow
      ...
    }
}

现在我要做的是命名特定的色调：

//theme/foundation/colors.js
...
export const brand = {
  myBrand: {
    blue: colors.myBlue['800'],
    yellow: colors.myYellow['400'],
    clickable: colors.myYellow['400']
}

所以我可以这样做

//theme/global.js
a: {
  color: 'myBrand.clickable'
}

完全按照上面的方法操作是行不通的（它在dev inspector的渲染代码中显示为color: myBrand.clickable，并带有“不支持的属性值”警告。
如果我把它作为一个变量引用，如下所示：

//theme/global.js
import { brand } from './foundations/colors';

a: {
  color: brand.myBrand.clickable
}

对于从主题应用的样式，它可以正常工作（例如，在上面的示例中，所有<a>元素都设置为黄色），但我仍然无法在React组件中将其作为脉轮命名的颜色进行访问。

import { IconButton, useColorModeValue } from '@chakra-ui/react';
import { BiMailSend } from 'react-icons/bi';

const MyButton = () => {
  return (
    <IconButton bg={useColorModeValue('myBrand.clickable', 'myBrand.clickable')}
      onClick={() => console.log('click')}
      icon={<BiMailSend />
  )
}

将呈现图标，但不设置颜色。但是，如果我将“myBrand.clickable”更改为一个命名的脉轮颜色（例如，“green”或“green.400”），它可以正常工作。
我如何设置这个，这样我就可以在主题定义和脉轮组件中在整个代码中使用我自己命名的颜色？