0

使用extendTheme 时，我的Macbook 上的"Cannot read properties of undefined (reading 'useSystemColorMode')" NextJs 和chakra-ui v1.7.5 出现错误

这是我的package.json文件

"dependencies": {
    "@chakra-ui/icons": "^1.1.1",
    "@chakra-ui/react": "^1.7.5",
    "@emotion/react": "^11.7.1",
    "@emotion/styled": "^11.6.0",
    "framer-motion": "^5.6.0",
    "next": "12.0.8",
    "react": "17.0.2",
    "react-dom": "17.0.2",
    "react-icons": "^4.3.1"
  },

src/theme/index.js。已经尝试传播 ...config，但问题仍然存在。

import { extendTheme, theme as base } from "@chakra-ui/react";

const config = {
  initialColorMode: "light",
  useSystemColorMode: false,
};

const theme = () =>
  extendTheme({
    config,
    fonts: {
      heading: `Montserrat, ${base.fonts?.heading}`,
      body: `Inter, ${base.fonts?.body}`,
    },
  });

export default theme;

页面/_app.js

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

function MyApp({ Component, pageProps }) {
  return (
    <ChakraProvider theme={theme}>
      <Component {...pageProps} />
    </ChakraProvider>
  );
}

export default MyApp;

我已经按照这里给出的所有说明 https://chakra-ui.com/guides/getting-started/nextjs-guide但仍然无法解决问题。希望有人可以在这方面提供帮助。谢谢！

4

0 回答 0