chakra ui 自定义主题在我的下一个 js 项目中根本不起作用

Question

我正在尝试使用 chakra UI 构建 nextjs 项目，但我的自定义主题根本不起作用，我已经尝试了 chakra 文档中的所有内容，甚至我添加的自定义颜色也不起作用，但默认颜色chakra 工作正常，我想知道我已经使用 chakra 文档设置了暗/亮模式，如果它与我的问题有关

My theme.js file

My theme.js file

My index.tsx file

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

const styles = {
  global: (props) => ({
    body: {
      bg: mode("#a8dadc", "#006d77")(props),
      color: mode("#006d77", "#a8dadc")(props),
    },
  }),
};

const colors = {
  primary: "#e29578",
};

const theme = extendTheme({ styles, colors });
export default theme;

My _app.tsx file

My index.tsx file

Answer 1

我有同样的问题！

我注意到有一些默认的 css 变量附加到 :root 上，而 ChakraProvider 默认情况下无法覆盖它们，所以我将其设置cssVarsRoot为解决方法。

  <ChakraProvider theme={theme} cssVarsRoot="body">