如何设置Chakra UI主题中自定义绿色的默认色值？

Chakra UI中直接使用green这类不带色阶的颜色名称时，默认会回退到CSS原生颜色。要让它指向你的自定义色阶，只需在extendTheme的颜色配置里给green添加DEFAULT字段，指定你想要的默认色值即可。

示例代码 #

假设你原本的自定义颜色配置是这样的：

import { extendTheme } from '@chakra-ui/react';

const theme = extendTheme({
  colors: {
    green: {
      50: '#f0fff4',
      100: '#c6f6d5',
      200: '#9ae6b4',
      300: '#68d391',
      400: '#48bb78',
      500: '#38a169',
      600: '#2f855a',
      700: '#276749',
      800: '#22543d',
      900: '#1c4532',
    },
  },
});

只需给green对象添加DEFAULT属性，绑定你自定义色阶中的某个值（比如常用的500色阶）：

import { extendTheme } from '@chakra-ui/react';

const theme = extendTheme({
  colors: {
    green: {
      DEFAULT: '#38a169', // 对应自定义green.500的色值
      50: '#f0fff4',
      100: '#c6f6d5',
      200: '#9ae6b4',
      300: '#68d391',
      400: '#48bb78',
      500: '#38a169',
      600: '#2f855a',
      700: '#276749',
      800: '#22543d',
      900: '#1c4532',
    },
  },
});

配置完成后，<Box bg="green" />就会使用你自定义的DEFAULT色值，而不再是CSS默认绿色。

原理说明 #

Chakra UI的颜色解析逻辑是：当使用不带色阶的颜色名称时，会优先查找该颜色对象下的DEFAULT字段；如果没有配置DEFAULT，则会自动回退到CSS原生颜色值。

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