reactjs - 如何在 React App 中排除全局样式？

Question

我正在使用 Material UI用于构建我的 React 项目。

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

我的 React 应用的 css 正在被 覆盖全局风格在该网站中定义。

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

我看到了 this question但解决方案对我没有帮助。

Answer 1

如果 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 嵌入。