所以我正在使用 ChakraUI 和 React JS 来做一个项目。每当我启动项目时,都会出现错误“TypeError:无法读取未定义的属性(读取'useSystemColorMode')”。
我没有编辑任何全局主题或脉轮中的任何内容。我刚刚开始制作导航栏,用 CSS 设计。当我尝试运行它时,它会向我显示错误。
这是我的导航栏组件
import React from "react";
import { MenuItems } from "./MenuItems";
import "./navbar.css";
function Navbar() {
return (
<>
<nav className='NavbarItems'>
<h1 className='navbar-logo'></h1>
<div className='menu-icon'></div>
<ul>
{MenuItems.map((item, index) => {
return (
<li key={index}>
<a className={item.cname} href={item.url}>
{item.title}
</a>
</li>
);
})}
</ul>
</nav>
</>
);
}
export default Navbar;
导航栏 CSS 文件
.NavbarItems {
height: 80px;
display: flex;
justify-content: center;
}
App.js 文件
import { ChakraProvider } from "@chakra-ui/provider";
import Navbar from "./components/navbar";
function App() {
return (
<ChakraProvider>
<Navbar />
</ChakraProvider>
);
}
export default App;
所以基本上这是 ChakraUI 主题的问题,即使我没有对 ChakraUI 主题做任何事情或任何事情。 我添加了 theme.js 文件,其中包含以下内容:
// theme.js
// 1. import `extendTheme` function
import { extendTheme } from "@chakra-ui/react";
// 2. Add your color mode config
const config = {
initialColorMode: "light",
useSystemColorMode: true,
};
// 3. extend the theme
const theme = extendTheme({ config });
export default theme;
然后我在index.js 文件中包含以下内容:
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import { ColorModeScript } from "@chakra-ui/color-mode";
import theme from "./theme";
ReactDOM.render(
<React.StrictMode>
<ColorModeScript initialColorMode={theme.config.initialColorMode} />
<App />
</React.StrictMode>,
document.getElementById("root")
);
它奏效了。如果有人面临同样的问题,您可以查看https://chakra-ui.com/docs/features/color-mode。
一旦我使用extendTheme而不是主题对象,错误就消失了。 https://chakra-ui.com/docs/theming/customize-theme
您应该做的第一件事是检查消息类型的名称(错误、成功、警告) 如果拼写错误,就会出现错误
我认为通过在 ChakraProvider 中添加 value={defaultSystem} 可以修复它。因为它最初需要值。 。 它对我有用:)