如何为MUI生成的所有样式添加CSS包装器类以提升优先级？

要解决React嵌入现有站点时MUI样式被覆盖的问题，核心是让MUI生成的所有样式规则自动带上自定义父类选择器，以此提升优先级。下面是两种实用的实现方式：

方法一：自定义MUI样式注入逻辑（无需额外构建配置） #

直接通过MUI的StyledEngineProvider自定义样式注入函数，把生成的每一条CSS规则都包裹在你的父类选择器下：

1. 先给React根组件套上自定义父容器：

function RootApp() {
  return (
    <div className="MY-CUSTOM-CSS-WRAPPER-CLASS">
      {/* 你的所有MUI组件内容都放在这里 */}
    </div>
  );
}

2. 配置StyledEngineProvider替换默认的样式注入逻辑：

import { StyledEngineProvider } from '@mui/material/styles';
import { render } from 'react-dom';

// 自定义样式注入函数，给每个MUI生成的类加上父级选择器前缀
const customInject = (styleContent) => {
  // 匹配所有MUI生成的类（以.css-开头），替换成父类+子类的形式
  const wrappedStyle = styleContent.replace(/\.(css-[^\s{]+)/g, '.MY-CUSTOM-CSS-WRAPPER-CLASS $1');
  // 创建style标签并插入到页面头部
  const styleEl = document.createElement('style');
  styleEl.textContent = wrappedStyle;
  document.head.appendChild(styleEl);
  // 返回清理函数，组件卸载时移除style标签
  return () => document.head.removeChild(styleEl);
};

// 用自定义的StyledEngineProvider包裹整个应用
render(
  <StyledEngineProvider inject={customInject}>
    <RootApp />
  </StyledEngineProvider>,
  document.getElementById('root')
);

这样MUI生成的所有样式都会自动变成.MY-CUSTOM-CSS-WRAPPER-CLASS .css-xxx的形式，优先级比现有站点的单一类样式更高。

方法二：通过PostCSS在构建阶段处理（适合已有PostCSS配置的项目） #

如果你的项目已经在用PostCSS，可以借助postcss-nested插件，在构建时把所有MUI样式包裹在自定义父类下：

1. 安装依赖：

npm install postcss-nested --save-dev

2. 修改PostCSS配置文件（比如postcss.config.js）：

module.exports = {
  plugins: [
    require('postcss-nested')({
      // 指定要展开的父类选择器
      unwrap: ['.MY-CUSTOM-CSS-WRAPPER-CLASS']
    }),
    // 保留你原有的其他PostCSS插件
  ]
};

3. 在全局CSS文件中嵌套引入MUI的样式：

.MY-CUSTOM-CSS-WRAPPER-CLASS {
  /* 引入MUI的基础样式，根据你的项目实际路径调整 */
  @import '@mui/material/styles';
}

构建时PostCSS会自动把所有MUI的样式规则嵌套到.MY-CUSTOM-CSS-WRAPPER-CLASS下，实现和方法一一样的效果。

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