Chakra UI自定义主题与Button Recipe未在自定义Button组件中生效的问题咨询

我正在尝试更新主题，给组件设置一些自定义颜色——比如我想让默认按钮使用特定色调的蓝色。于是我按照文档添加了语义化tokens，代码如下：

import { createSystem, defaultConfig, defineConfig } from '@chakra-ui/react';

import { buttonRecipe } from './receipes/button';

export const buttonRecipe = defineRecipe({
  base: {
    display: 'flex',
  },
  variants: {
    visual: {
      solid: { bg: 'red', color: 'white' },
      outline: { borderWidth: '1px', borderColor: 'blue.400' },
    },
    size: {
      sm: { padding: '4', fontSize: '12px' },
      lg: { padding: '8', fontSize: '24px' },
    },
  },
});

export const config = defineConfig({
  theme: {
    recipes: {
      button: buttonRecipe,
    },
    tokens: {
      colors: {
        red: { value: '#CB4022' },
        green: { value: '#01ca96' },
        orange: { value: '#FCAF45' },
        brand: {
          200: { value: '#6EB5F7' },
          400: { value: '#0E70F1' },
          900: { value: '#1F211F' },
        },
      },
    },
    semanticTokens: {
      colors: {
        error: { value: '{colors.red}' },
        success: { value: '{colors.green}' },
        warning: { value: '{colors.orange}' },
        brand: {
          solid: { value: '{colors.brand.400}' },
          contrast: { value: '{colors.brand.200}' },
        },
      },
    },
  },
});

export const system = createSystem(defaultConfig, config);

我还使用Chakra的代码片段创建了Button组件，生成的代码如下：

import type { ButtonProps as ChakraButtonProps } from '@chakra-ui/react';
import {
  AbsoluteCenter,
  Button as ChakraButton,
  Span,
  Spinner,
} from '@chakra-ui/react';
import * as React from 'react';

interface ButtonLoadingProps {
  loading?: boolean;
  loadingText?: React.ReactNode;
}

export interface ButtonProps extends ChakraButtonProps, ButtonLoadingProps {}

export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
  function Button(props, ref) {
    const { loading, disabled, loadingText, children, ...rest } = props;
    return (
      <ChakraButton disabled={loading || disabled} ref={ref} {...rest}>
        {loading && !loadingText ? (
          <>
            <AbsoluteCenter display="inline-flex">
              <Spinner color="inherit" size="inherit" />
            </AbsoluteCenter>
            <Span opacity={0}>{children}</Span>
          </>
        ) : loading && loadingText ? (
          <>
            <Spinner color="inherit" size="inherit" />
            {loadingText}
          </>
        ) : (
          children
        )}
      </ChakraButton>
    );
  },
);

当我用NextJS构建Web应用后，<Button />的颜色没有生效，不管是solid还是outline变体都不行。我尝试给按钮添加recipe，但也没有渲染出预期效果。

我需要怎么做才能让颜色和recipe被正确识别并生效呢？

备注：内容来源于stack exchange，提问作者Phil Lucks