如何让Formio表单内的MUI组件不受其CSS样式影响？

我在项目中使用Formio快速生成表单，嵌入MUI组件后发现Formio的CSS样式污染了MUI组件的原有样式。尝试将Bootstrap CSS中的.formio-component选择器修改为.formio-component :not(.mui-component)，但并未生效，请问该怎么解决？

代码示例 #

HTML结构

<div class="formio-component">
  <div class="formio-form">
    <!-- Formio表单内容 -->

    <div class="row">
      <div class="col-md-12">
        <div class="mui-component">
          <!-- 需要隔离样式的MUI组件 -->
        </div>
      </div>
    </div>

    <!-- 更多Formio表单内容 -->
  </div>
</div>

原Bootstrap CSS规则

.formio-component {
  /* Formio相关Bootstrap样式 */
}

修改后的尝试（未生效）

.formio-component :not(.mui-component) {
  /* 尝试排除MUI组件的样式规则 */
}

解决方案 #

1. 提升MUI组件样式优先级

给MUI组件的根容器添加自定义类（比如mui-isolated），然后通过更具体的CSS规则清除继承样式并恢复MUI自身样式：

/* 清除容器继承的Formio样式 */
.mui-isolated {
  all: unset;
  display: block; /* 恢复块级布局，根据组件类型调整 */
}

/* 恢复MUI内部元素的原有样式 */
.mui-isolated * {
  all: revert;
}

也可以直接使用MUI的sx属性或styled组件，在组件内部编写样式，利用CSS优先级覆盖Formio的全局样式。

2. 精准修正:not选择器的作用范围

你之前的修改只排除了直接子元素，但Formio的样式可能作用在更深层级的元素上，或者选择器更具体。可以调整选择器写法，精准排除MUI组件及其内部所有元素：

/* 给Formio组件下所有非MUI组件的元素应用样式 */
.formio-component *:not(.mui-component):not(.mui-component *) {
  /* Formio的Bootstrap样式规则 */
}

注意：不要直接修改Bootstrap原文件，建议在项目的自定义CSS文件中编写覆盖规则，避免后续框架升级丢失修改。

3. 使用Shadow DOM彻底隔离样式

将MUI组件包裹在Shadow DOM中，完全隔离外部样式污染：

const muiContainer = document.querySelector('.mui-component');
const shadowRoot = muiContainer.attachShadow({ mode: 'open' });

// 将MUI组件内容移入Shadow DOM（若通过React渲染，可直接在Shadow Root内挂载组件）
shadowRoot.innerHTML = `
  <div class="mui-inner">
    <!-- MUI组件的HTML内容 -->
  </div>
`;

// 引入MUI样式到Shadow DOM中
const muiStyle = document.createElement('link');
muiStyle.rel = 'stylesheet';
muiStyle.href = 'path/to/your/mui/styles.css';
shadowRoot.appendChild(muiStyle);

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