如何将Material-UI注入的CSS归入指定@layer层级

MUI v5及以上版本默认基于Emotion作为样式引擎，不需要修改框架源码，通过自定义Emotion缓存配置就能直接管控所有MUI生成样式的注入逻辑，具体操作如下：

• 安装依赖
  先确保项目装了Emotion缓存相关的包，执行对应安装命令：
  npm install @emotion/cache @emotion/react
  用yarn/pnpm的话替换成对应包管理命令就行。

• 配置自定义Emotion缓存
  核心是加一个stylis编译插件，在样式生成阶段把所有MUI输出的规则自动包裹进@layer third-party块，参考配置代码：

  import createCache from '@emotion/cache';
  import { CacheProvider } from '@emotion/react';
  import { ThemeProvider, createTheme } from '@mui/material/styles';
  
  // 自定义编译插件，把顶层样式规则统一包裹进third-party层级
  const wrapInThirdPartyLayer = (element) => {
    if (element.type === 'rule' && !element.parent) {
      const ruleContent = element.props.join('');
      element.props = [`@layer third-party { ${ruleContent} }`];
      element.return = element.props;
    }
  };
  
  // 生成MUI专用的样式缓存实例
  const muiCache = createCache({
    key: 'mui',
    stylisPlugins: [wrapInThirdPartyLayer],
    prepend: false, // 保持默认插入位置，配合layer顺序控制优先级即可
  });
  
  const customTheme = createTheme({
    // 这里正常放你原本的MUI主题配置就行
  });
  
  // 在应用根组件外层包裹缓存提供者和主题提供者
  export default function AppRoot({ children }) {
    return (
      <CacheProvider value={muiCache}>
        <ThemeProvider theme={customTheme}>
          {/* 其他全局组件比如CssBaseline、路由根节点正常放这里 */}
          {children}
        </ThemeProvider>
      </CacheProvider>
    );
  }
  

• 配套自定义CSS的layer顺序声明
  在你自己的全局CSS文件最顶部，声明@layer的优先级顺序，把third-party放在最前面，保证后续自定义样式层的优先级天然高于MUI样式，示例：

  /* 规则：@layer声明里越靠后的层级，优先级越高 */
  @layer third-party, base, components, utilities;
  

  之后自己写的样式按规划放进对应自定义层就行，覆盖MUI默认样式的时候再也不需要加!important强行提优先级。

• 注意事项

  • 如果你手动把MUI的样式引擎换成了styled-components，实现逻辑是通的：自定义StyleSheetManager，传入同逻辑的stylis插件包裹样式即可，不过还是推荐用默认的Emotion引擎，坑少、兼容性和性能表现都更好。
  • MUI自带的CssBaseline全局重置样式、组件动态生成样式、主题注入样式都会被自动归入third-party层，不需要额外单独处理。
  • 配完直接开浏览器F12，看Elements面板里head标签下的MUI样式块，所有规则都套在@layer third-party {}里就说明生效了。
  • 如果你还在使用MUI v4（基于JSS引擎），需要额外引入jss-plugin-nested配合插件规则包裹layer，建议优先升级到v5+版本，对@layer的支持更稳定。

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