React+ViteJs调整MUI与CSS模块顺序解决自定义样式优先级问题

核心原理是调整MUI底层Emotion样式引擎的注入顺序，让MUI生成的默认样式插入到<head>的最前部，保证后续加载的CSS Modules样式在层叠顺序上更靠后，相同选择器优先级下自动覆盖MUI默认样式，无需依赖!important。

具体操作步骤 #

• 第一步：配置Emotion缓存，开启样式前置注入
  MUI v5+ 基于Emotion实现样式注入，默认会把生成的样式追加到<head>末尾，这是导致优先级高于CSS Modules的核心原因。在项目入口文件（通常是src/main.tsx/src/main.jsx）中添加以下配置：

import React from 'react';
import ReactDOM from 'react-dom/client';
import createCache from '@emotion/cache';
import { CacheProvider } from '@emotion/react';
import App from './App';

// 创建MUI专属样式缓存
const muiStyleCache = createCache({
  key: 'mui',
  prepend: true, // 核心配置：强制MUI生成的样式插入到目标容器的最开头
});

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    {/* 用CacheProvider包裹根组件，注入自定义缓存配置 */}
    <CacheProvider value={muiStyleCache}>
      <App />
    </CacheProvider>
  </React.StrictMode>
);

• 第二步（可选，适配复杂场景）：指定固定的样式插入锚点
  如果项目中引入了其他会动态注入样式的第三方库，担心插入顺序被打乱，可以在根目录index.html的<head>标签最开头添加一个空meta标签作为锚点，固定MUI样式的插入位置：

<head>
  <meta name="mui-style-insert-point" />
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>你的项目标题</title>
</head>

然后修改之前的缓存配置，指定插入容器为锚点所在位置：

const muiStyleCache = createCache({
  key: 'mui',
  prepend: true,
  // 固定将MUI样式插入到锚点位置
  container: document.querySelector('meta[name="mui-style-insert-point"]')?.parentNode as HTMLElement,
});

• 第三步：验证注入顺序
  启动项目后打开浏览器开发者工具，查看<head>内的标签顺序：
  1. 最前方是带data-emotion="mui"属性的<style>标签，也就是MUI生成的默认样式
  2. 后面跟着Vite开发环境注入的CSS Modules对应的<style>标签，或是生产构建后提取的CSS文件<link>标签
     顺序符合预期的话，*.module.scss中写的自定义样式只要选择器权重和MUI默认样式持平，就会自动覆盖。

注意事项 #

• 如果配置时提示找不到@emotion/cache依赖，手动执行包安装命令即可：pnpm add @emotion/cache（npm/yarn替换成对应安装命令即可），该包是MUI的官方依赖，不存在版本冲突问题。
• 如果你在MUI组件上使用了sx属性或是styled()API写的自定义样式，这部分样式属于Emotion动态生成的高优先级样式，会排在MUI默认样式之后，如果需要用CSS Modules覆盖这部分内容，只需要稍微提升scss中选择器的权重即可（比如多叠加一层类名），依然不需要使用!important。
• 不需要修改vite.config.ts中的CSS相关配置，Vite默认的CSS Modules处理规则完全适配该方案。

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