React/MUI项目中makeStyles样式仅在保存文件时生效的问题

核心原因分析 #

MUI 5 已将 makeStyles 移至独立包 @mui/styles，不再属于核心库范畴，它与 MUI 5 默认使用的 Emotion 样式引擎存在兼容性冲突：

• 页面刷新时，makeStyles 生成的样式注入顺序晚于 MUI 组件的内置样式，导致自定义样式被默认样式覆盖
• 热重载（保存文件）时，样式注入顺序临时改变，自定义样式优先级提升，因此短暂生效

解决办法 #

方案一：改用 MUI 5 官方推荐的样式方案（优先推荐） #

放弃 makeStyles，使用以下官方原生支持的方式：

1. sx prop：直接在 MUI 组件上通过 sx 属性定义样式，优先级更高且无需额外依赖

   import Box from '@mui/material/Box';
   
   function Experiment() {
     return (
       <Box sx={{ backgroundColor: 'red', padding: 2 }}>
         自定义内容
       </Box>
     );
   }
   

2. styled 组件：使用 @mui/material/styles 中的 styled 方法创建自定义样式组件

   import { styled } from '@mui/material/styles';
   import Box from '@mui/material/Box';
   
   const StyledBox = styled(Box)(({ theme }) => ({
     backgroundColor: 'red',
     padding: theme.spacing(2),
   }));
   
   function Experiment() {
     return <StyledBox>自定义内容</StyledBox>;
   }
   

方案二：继续使用 makeStyles 时的修复措施 #

如果必须保留 makeStyles，尝试以下步骤：

• 确保项目安装了 @mui/styles、@emotion/react 和 @emotion/styled，解决引擎依赖冲突
• 配置 StyledEngineProvider 强制统一样式注入顺序：

  import { StyledEngineProvider } from '@mui/material/styles';
  import { CacheProvider } from '@emotion/react';
  import createCache from '@emotion/cache';
  
  const cache = createCache({ key: 'css', prepend: true });
  
  function App() {
    return (
      <StyledEngineProvider injectFirst>
        <CacheProvider value={cache}>
          {/* 应用内容 */}
        </CacheProvider>
      </StyledEngineProvider>
    );
  }
  

• 清理项目构建缓存（删除 node_modules/.cache 目录或执行 npm ci），避免旧样式缓存干扰
• 提升自定义样式的特异性，比如通过嵌套选择器提高优先级：

  const useStyles = makeStyles((theme) => ({
    root: {
      '&.custom-container': {
        backgroundColor: 'red',
        padding: theme.spacing(2),
      },
    },
  }));
  
  // 使用时叠加额外类名
  function Experiment() {
    const classes = useStyles();
    return <div className={`${classes.root} custom-container`}>内容</div>;
  }
  

内容的提问来源于stack exchange，提问作者David Sargrad