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

Question

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

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

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

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

我看到了这个问题，但解决方案对我没有帮助。

Answer 1

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