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

Posted 2023-02-23

【中文标题】如何在 React App 中排除全局样式？

【英文标题】：How to exclude global styles in a React App?

【发布时间】：2019-12-29 09:28:46

【问题描述】：

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

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

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

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

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

【问题讨论】：

“但是有一个组件必须嵌入到不同的站点。”你能解释一下吗？

现在告诉我是否有意义。

【参考方案1】：

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

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

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

【参考方案2】：

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

尽可能以这些样式使用!important。 使用id 代替class 来指定样式，因为id 具有更高的优先级。 如果您为元素提供更具体的样式，则构建文件 css 将覆盖外部站点的 css，例如，如果我们将 css 编写为 .parent#child，这是更具体的样式，它将覆盖包装器站点的 css。

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

【讨论】：

我无法控制其他网站的 css，例如，我无法更改他们的 css。他们有一种应用于我的按钮的按钮样式，但我不希望这种情况发生。

是的，您只需要将此样式提供给您的代码库而不是其他人，这些更改是针对您的代码不存在的......

是的，这听起来不错，但我认为 css 重置是更好的方法，因为我不必更改每种样式。 :) 感谢您的帮助

【参考方案3】：

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

【讨论】：

我尝试了 CSS 重置，但到目前为止还没有成功，你能推荐我任何与 react 配合得很好的库吗？还是嵌入 iframe 的库？

我在 react 前端使用 Material UI，我添加了 CssBaseline，它基本上可以重置 css。谢谢你的线索。