我目前正在将Next.js项目从版本12升级到版本13，这需要将'src'字典更改为'app'。
我遇到了一个问题，我的Chakra UI代码，以前在v12中工作，不再正常工作。
具体来说，当我切换颜色模式时，只有使用“useColorModeValue”的组件显示正确的颜色，而背景和文本颜色保持不变。
我不确定为什么会发生这种情况，并希望了解如何解决它的任何见解或建议。
样式
const styles: Styles = {
global: (props: GlobalStyleProps) => ({
body: {
color:
props.colorMode === "light" ? light.onBackground : dark.onBackground,
bg: props.colorMode === "light" ? light.background : dark.background,
maxW: "100vw",
overflowX: "hidden",
},
"*::placeholder": { opacity: 0.6 },
"*, *::before, &::after": {
outlineColor: props.colorMode === "light" ? light.outline : dark.outline,
padding: 0,
margin: 0,
boxSizing: "border-box",
//outline: "1px solid green",
},
a: {
color: "inherit",
textDecoration: "none",
},
}),
};theme.ts
const theme = extendTheme({
config,
colors: {
light,
dark,
elevation,
},
fonts: {
heading: `'Roboto', sans-serif`,
body: `'Open Sans', sans-serif`,
},
styles,
});下一个js 13 layout.tsx
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="en">
<head />
<body>
<CacheProvider>
<ChakraProvider theme={theme}>
<ColorModeScript
initialColorMode={theme.config?.initialColorMode}
/>
<AnimatePresence mode="wait">
<Layout>
<>{/* <Navbar /> */}</>
<>
<Header />
</>
<>{children}</>
</Layout>
</AnimatePresence>
</ChakraProvider>
</CacheProvider>
</body>
</html>
);
}
1条答案
按热度按时间sshcrbum1#
你能确保你已经更新到最新的Chakra UI版本吗？最新的版本（特别是2.5.0）似乎有很多关于NextJS的变化。我在更新到更新的版本之前遇到了同样的问题。还要确保检查Getting Started Guide，因为有一个特殊的部分用于设置
app目录。希望这能有所帮助。编辑：特别要确保使用
@chakra-ui/next-js包，并使用该包提供的<CacheProvider>Package 整个应用程序（在layout.tsx|js中）。此外，我可以确认颜色模式确实不适合我在我的主题配置中工作。我建议通过GitHub repo提交官方bug报告。