Question

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

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

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

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

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

Answer 1

我看到了针对该问题的多种解决方案

以可能的样式使用!important。
使用id而不是class来提供样式，因为id的出现率更高。
如果您为元素提供更具体的样式，则构建文件css将覆盖外部站点的css，即就像我们像.parent#child这样编写css一样，这是更具体的样式，它将覆盖包装器站点的css 。

检查https://stuffandnonsense.co.uk/archives/css_specificity_wars.html

Answer 2

如果无法使用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嵌入。

Answer 3

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

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

例如，如果您使用的是Material-UI表，而现有的表样式正在影响渲染，则可以将现有的表样式放入单独的CSS文件中，仅在呈现现有表时才将其导入； HTML页面。

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

3 个答案: