我正在使用next14.2.4和mui5.15.20构建一个项目。这是我遇到问题的代码部分。
主题.js
"use client";
import { createTheme } from "@mui/material";
import { createContext, useMemo, useState } from "react";
//use different color palette for dark mode and white mode
export const tokens = (mode) => ({
...(mode === "dark"
? {
white: {
100: "#ffffff",
200: "#fefdfc",
//and so on
},
black: {
//same as above
},
brown: {
//same as above
},
}
: {
white: {
//same as above
},
black: {
//same as above
},
brown: {
//same as above
},
}),
});
//mui theme settings
export const themeSettings = (mode) => {
const colors = tokens(mode);
return {
palette: {
mode: mode,
...(mode === "dark"
? {
primary: {
main: colors.black[500],
},
secondary: {
main: colors.white[500],
},
background: {
default: colors.black[500],
},
}
: {
primary: {
main: colors.white[500],
},
secondary: {
main: colors.black[500],
},
background: {
default: colors.white[500],
},
}),
},
typography: {
fontFamily: ["Source Sans Pro", "sans-serif"].join(","),
fontSize: 15,
},
};
};
export const ColorModeContext = createContext({
toggleColorMode: () => {},
});
// theme.js
export const useMode = () => {
const [mode, setMode] = useState("dark");
const colorMode = useMemo(
() => ({
toggleColorMode: () =>
setMode((prev) => (prev === "light" ? "dark" : "light")),
}),
[]
);
const theme = useMemo(() => createTheme(themeSettings(mode)), [mode]);
return [theme, colorMode];
};
为了在我的项目中使用上述自定义主题，我在 laayout.js 中做了以下操作。
import { AppRouterCacheProvider } from "@mui/material-nextjs/v13-appRouter";
import { CssBaseline, ThemeProvider } from "@mui/material";
import { ColorModeContext, useMode } from "./theme";
import "./globals.css";
export const metadata = {
title: "Blog App",
description: "Simple blog app",
};
export default function RootLayout({ children }) {
const [theme, mode] = useMode();
return (
<html lang="en">
<body>
<AppRouterCacheProvider>
<ColorModeContext.Provider value={colorMode}>
<ThemeProvider theme={theme}>
<CssBaseline />
{children}
</ThemeProvider>
</ColorModeContext.Provider>
</AppRouterCacheProvider>
</body>
</html>
);
}
但它显示以下错误：
Error: (0 , _theme__WEBPACK_IMPORTED_MODULE_1__.useMode) is not a function or its return value is not iterable如何解决？
这是在最新的 Nextjs 中使用 MUI 的正确方法吗？因为我在某个地方看到我们必须在 src 目录中创建 .js 文件才能使用它？
您的
layout.js"use client"