Next.js搭配Material UI v5时makeStyles样式不生效问题求助

问题原因 #

• useStyles钩子定义位置错误：你将makeStyles生成useStyles的逻辑写在了Navbar组件的函数体内部，makeStyles需要在组件外部执行才能正确生成稳定的样式注入规则，放在组件内部会导致每次组件渲染都重新生成钩子实例，样式无法正常注入DOM，所以开发者工具看不到对应的样式规则。
• 缺少样式上下文：@mui/styles是MUI v5的遗留样式方案，依赖上层的ThemeProvider或StylesProvider提供样式注入上下文，如果你项目的根组件没有嵌套对应的Provider，makeStyles生成的样式无法被插入到页面中。
• 版本兼容问题：如果你的项目使用了React 18严格模式，或是Next.js 13+的App Router，@mui/styles本身就和新的React渲染机制不兼容，会出现样式注入失效的问题。

解决方案 #

方案1：调整代码结构（优先尝试） #

将useStyles的定义移到组件外部即可，示例：

import { AppBar, Toolbar, Typography, Box, Button, Link } from "@mui/material";
import { makeStyles } from "@mui/styles";

// 调整到组件外部定义
const useStyles = makeStyles(() => ({
  navItem: {
    color: "white"
  }
}));

const Navbar = () => {
  const classes = useStyles();

  return (
    <>
      <Box sx={{ flexGrow: 1 }}>
        <AppBar position="static">
          <Toolbar>
            <Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
              MyCode
            </Typography>
            <Typography variant="h6" component="div">
              <Link className={classes.navItem} href="/blog">Blog</Link>
            </Typography>
            <Button color="inherit">Login</Button>
          </Toolbar>
        </AppBar>
      </Box>
    </>
  )
}

export default Navbar;

方案2：替换为MUI v5推荐的sx写法（无兼容问题） #

直接使用MUI原生支持的sx属性设置样式，无需引入@mui/styles，也不会出现样式注入失效的问题：

// 可删除import { makeStyles } from "@mui/styles"; 相关代码
<Link sx={{ color: "white" }} href="/blog">Blog</Link>

方案3：补充样式上下文（坚持使用makeStyles的场景） #

在项目根组件（Pages Router的_app.js或App Router的layout.js）外层嵌套ThemeProvider：

import { ThemeProvider, createTheme } from '@mui/material/styles';
import CssBaseline from '@mui/material/CssBaseline';

const theme = createTheme();

export default function Root({ children }) {
  return (
    <ThemeProvider theme={theme}>
      <CssBaseline />
      {children}
    </ThemeProvider>
  );
}

内容的提问来源于stack exchange，提问作者Code Guru