如何不让父 css 影响子组件的 css？答案

【问题标题】：How to not let parent css impact css of a child component?如何不让父 css 影响子组件的 css？
【发布时间】：2021-02-02 03:56:57
【问题描述】：

我创建了一个 react 应用程序，它基本上是一个可以包含在任何 HTML 页面上的小部件，但是当安装在不同的页面上时，它的 CSS 会受到影响。我希望这个反应应用程序的 CSS 是可靠的，并且不受其父页面的 CSS 影响。我有 index.scss 为正文和代码定义了字体系列等。在其他任何地方，我都使用样式化组件来创建具有各自 CSS 属性的自定义组件。我想知道我的样式化组件的 CSS 是否有可能被覆盖。 CSS 模块可以解决我的问题吗？

【问题讨论】：

标签： javascript html css reactjs

【解决方案1】：

1：规范您的样式

例如，如果您有一个 <div>，它的 position 通过页面上的样式进行了修改，您可以手动将 position 设置为它应该在所说的 <div> 上，这样它就不会依赖继承。

例如：

/* Global styling that will affect '.my-app div' */
div {
  display: flex;
}

/* Override global styling by manually setting display, instead of relying on it's supposed default value */
.my-app div {
  display: block;
}

2。使用 !important

将!important 标签添加到您的样式中，以便它们具有优先级。

.my-class {
  display: flex !important;
}

【讨论】：

很少有充分的理由使用!important。当您需要为 my-class 的子组件设置样式或在不同上下文中使用具有该类的元素时，它只会变得更加困难，因为没有 !!important 或 !!!important。

【解决方案2】：

我会使用伪命名空间来区分上下文。我不会使用!important，除非作为最后的手段，因为a）你根本不需要它，并且b）它使覆盖覆盖变得更加困难。

<div id="aboutUs" class="foo">
  <span class="bar"></span>
</div>

.foo {
  /* Default styles */
}
#aboutUs.foo {
  /* Override defaults */
}
#aboutUs .bar {
  /* Override defaults */
}

我建议查看级联的工作原理：https://developer.mozilla.org/en-US/docs/Web/CSS/Cascade

【讨论】：