Question

：）

我已经开发了一段时间了，我决定使用here中的react-calendar组件。刚开始时，页面是轻量级的，它是开箱即用的，并且按照网页上的示例，我的页面呈现为：

后来，在开发过程中，由于我给页面增加了更多的复杂性，日历被完全毁容了，只能清楚地显示出来，就像这样：

我认为某些东西会覆盖我日历的css属性，并尝试将其放在应用div之外，如下所示：

<div>
    <Calendar/>
    <App/>
</div>

但是日历的外观保持不变。在浏览器中检查了元素之后，我发现一些可疑的划掉值：

是否有一种方法可以防止父级覆盖日历的CSS属性？还是我错过了一些至关重要的代码，这些代码会使日历看上去又很整洁？如果我在干净的项目中安装和使用它，它看起来总是很整洁（但我很想在每个地方都可以使用它：D）。

预先感谢您的建议！：）

祝你有美好的一天！

Answer 1

如果您有CSS属性，几乎可以随时重写它。无法知道（例如使用javascript）css值是否已被覆盖，因为浏览器是这样做的。可能是您的代码中有些东西通过添加一个覆盖其所有子元素的父类或一个主要的CSS样式表（如bootstrap）覆盖了一些其他子类而改变了行为。如果是这种情况，那么不看代码就很难分辨。

好消息

通过将组件包装在iframe中，可以完全防止CSS继承。

或

根据CSS的特殊性，您可以拥有几乎无法覆盖的属性。

根据MDN web docs：

已添加到元素的内嵌样式（例如，style =“ font-weight：bold”）总是覆盖外部样式表中的任何样式，因此可以被认为具有最高的特异性。

请阅读全文，以了解其工作原理。但是，此语句说，如果将属性设置为内联，则始终可以覆盖它们。现在，使用第三方组件的问题是您无法为该组件使用的所有内容设置样式，并且当然使用第三方组件的要点是您无需费心这些配置。

除了使用内联样式外，还可以将!important标志设置为CSS样式，但是我们再次遇到了第三方组件的问题。

我建议这些方法：

1）创建CSS规则以将值重置为初始值

例如，基本上创建一个名为NoInheritanceCalendar的规则，该规则将重置日历规则之前的所有规则。

将代码设置为：

<div className="NoInheritanceCalendar">
    <Calendar/>
</div>

并在您的CSS中：

div.NoInheritanceCalendar {
    all: initial;
}

2）将其包装在iframe中

虽然不是最好的方法，但这是您可以完全阻止继承的唯一方法。

3）复制组件的样式表，将前缀类添加到所有属性，以使它们更具体。

如果您的第三方组件的CSS是：

.rule1 {
    font ...
    width ...
}

.rule2 {
    font ...
    width ...
}

.rule3 {
    font ...
    width ...
}

您可以创建一个前缀类以使其更具体：

.MyClass.rule1 {
    font ...
    width ...
}

.MyClass.rule2 {
    font ...
    width ...
}

.MyClass.rule3 {
    font ...
    width ...
}

并将您的组件添加为react

<div className="MyClass">
    <Calendar/>
</div>

如果样式表很大，这些工具将为您提供帮助：

如何检测覆盖ReactJS组件的CSS属性的内容？

1 个答案: