Chakra UI v3自定义主题在React应用中未生效问题求助

问题根源分析 #

你的代码存在几个关键问题导致自定义主题未生效：

• 使用了错误的主题创建API：createSystem并非Chakra UI v2+推荐的主题扩展方式，官方标准用法是extendTheme
• ChakraProvider传参错误：没有正确传递自定义主题到Provider的theme属性
• 自定义字体未实际加载到项目中
• 输入框组件的聚焦样式需要显式绑定自定义阴影

修正后的完整代码 #

1. 自定义主题（theme.ts） #

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

export const theme = extendTheme({
  // 配置自定义字体
  fonts: {
    heading: `'Bebas Neue', sans-serif`,
    body: `'Poppins', sans-serif`,
  },
  // 自定义聚焦轮廓阴影
  shadows: {
    outline: "0 0 0 3px rgba(225, 92, 66, 0.5)",
  },
  // 显式覆盖Input组件的聚焦样式，确保使用自定义阴影
  components: {
    Input: {
      variants: {
        outline: {
          field: {
            _focusVisible: {
              boxShadow: "outline", // 关联上面定义的自定义阴影
            },
          },
        },
      },
    },
  },
});

2. 应用Provider配置（Provider.tsx） #

import { ChakraProvider } from "@chakra-ui/react";
import { theme } from "./theme";

export function Provider({ children }) {
  // 正确传递theme到ChakraProvider的theme属性
  return <ChakraProvider theme={theme}>{children}</ChakraProvider>;
}

3. 加载自定义字体（public/index.html） #

在HTML的<head>中添加Google Fonts的加载链接（如果用本地字体则替换为对应引入方式）：

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">

4. 入口文件与组件使用（无需修改） #

你的index.tsx和App.tsx代码逻辑正确，保持原样即可。

关键说明 #

• extendTheme是Chakra UI官方提供的主题扩展工具，会自动合并你的自定义配置到默认主题中，确保所有组件能正确读取到自定义值
• 必须加载自定义字体文件，否则浏览器会自动回退到系统默认字体，导致字体配置无效
• 部分组件（如Input）的默认聚焦样式可能需要显式绑定自定义阴影，通过components配置可以精准覆盖组件的默认样式

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