React应用搭配Material UI使用原生CSS时重启编辑器后部分样式失效

1. 样式优先级被MUI内置样式覆盖（最高概率） #

MUI 默认会将自身的组件样式注入到页面head标签的最末尾，优先级高于提前加载的自定义全局CSS，你写的class样式会被MUI自带的Typography默认样式覆盖，这是重启服务后样式注入顺序变化最常出现的问题。

修复方案： #

在项目入口文件（通常为index.js）中用StyledEngineProvider包裹根组件，开启injectFirst配置，将MUI样式注入到head最前面，让你的自定义CSS优先级更高：

import React from 'react';
import ReactDOM from 'react-dom/client';
import { StyledEngineProvider } from '@mui/material/styles';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <StyledEngineProvider injectFirst>
    <App />
  </StyledEngineProvider>
);

如果不想调整注入配置，也可以给你的CSS选择器提高权重，比如：

/* 增加选择器层级，权重高于MUI默认样式 */
div.the-div .header1 {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 700;
    margin-top: 160px;
}

2. 构建/浏览器缓存异常 #

重启编辑器后开发服务的缓存可能损坏，导致CSS文件没有被正确打包注入页面。

修复方案： #

• 按Ctrl+Shift+R（Mac为Cmd+Shift+R）硬刷新浏览器清空缓存
• 删除项目下node_modules/.cache文件夹，重启开发服务

3. CSS文件导入路径错误 #

如果调整过文件存储位置，相对路径可能失效，导致CSS文件没有被加载。

修复方案： #

打开浏览器开发者工具的「网络」面板，筛选CSS请求，查看Main.css是否返回404，确认文件路径和导入语句的相对路径匹配即可。

4. 全局样式冲突 #

如果其他组件也定义了同名的全局class（比如header1、the-div），后面加载的样式会覆盖前面的样式。

修复方案： #

给当前组件的class加唯一前缀，或者改用CSS Modules隔离样式作用域。

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