如何在 React 应用程序中排除全局样式？

我在用材质用户界面 https://material-ui.com/用于构建我的 React 项目。

然而，有一个组件必须嵌入到不同的站点。意思是，我提供该组件的生产版本以将其嵌入到不同的站点。

My React 应用程序的 css正在被覆盖全局样式该网站中定义。

我不想要这种行为。有什么方法可以隔离我的 React 应用程序的 css 和其他网站的全局 css。

I saw 这个问题 https://stackoverflow.com/questions/37409233/how-to-prevent-outside-css-from-adding-and-overriding-reactjs-component-styles但解决方案对我没有帮助。

如果 iframe 和 Web 组件都不可行，那么唯一剩下的选择就是 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 嵌入。