如果 iframes 和 Web Components 是不可能的，那么剩下的唯一选择就是 CSS 重置。

创建一个 CSS 类和一系列规则，用于重置出现在该类中的任何元素的样式。

.my-reset {
  /* Global resets (e.g. font family) */
}

.my-reset p {
  /* Reset paragraph styles */
}

.my-reset label {
  /* Reset label styles */
}

/* etc. */

将该类应用于根级组件：

function MyApp() {
    <div className="my-reset">
        { /* app goes here */ }
    </div>
}

有很多 CSS 重置库。由于您无法控制全局样式，因此您将不得不处理重设。因此，如果可能的话，请将您的组件作为 iframe 嵌入。

我看到了这个问题的多种解决方案

1. 使用!important这些风格可能。
2. 使用id给造型代替class，因为id具有较高的遵。
3. 如果您为元素提供更具体的样式，那么构建文件 css 将覆盖外部站点的 css，例如，如果我们像这样编写 css，则.parent#child是更具体的样式，它将覆盖包装站点的 css。

看看这个https://stuffandnonsense.co.uk/archives/css_specificity_wars.html

在不需要旧表格样式和同一 HTML 页面上的新 Material-UI 表格的情况下，您可以使用另一种杂乱无章的解决方案。

如果您拥有要在其中嵌入 React 应用程序的站点（即，您可以控制新环境的 CSS），则您可以为应用程序中的组件重置 CSS 样式的另一件事是删除那些正在覆盖您的样式。

例如，如果您使用 Material-UI 表格并且您现有的表格样式影响渲染，您可以将现有表格样式放入单独的 CSS 文件中，您仅在渲染现有表格时在另一个 HTML 页面上导入该文件。