javascript - 如何检测覆盖 ReactJS 组件的 css 属性的内容？

问题描述

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

在开发的后期，随着我向页面添加更多复杂性，日历变得完全变形，只能简单地显示，如下所示：

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

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

但日历的外观保持不变。在浏览器中检查元素后，我注意到一些可疑的划掉值：

有没有办法防止父级覆盖日历的 css 属性？还是我在代码中遗漏了一些重要的东西，这会使日历再次看起来整洁？如果我在一个干净的项目中安装和使用它，它总是看起来很整洁（但我希望在任何地方都有一个工作的：D）。

提前感谢您的建议！:)

祝你今天过得愉快！

标签： javascriptcssreactjs

如果你有一个 CSS 属性，你几乎总是可以覆盖它。无法判断（例如使用 javascript）是否覆盖了 css 值，因为是浏览器执行此操作。也许你的代码中有一些东西通过添加一个覆盖其所有子类的父类来改变行为，或者一个主要的 CSS 样式表，如覆盖其他一些的引导程序。如果这是你的情况，不看代码就很难判断。

好消息

您可以通过将组件包装在iframe.

或者

根据 CSS 的特殊性，您可以拥有几乎永远不会被覆盖的属性。

根据MDN 网络文档：

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

阅读完整的文章以了解其工作原理。不过，此声明表示，如果属性是内联设置的，您始终可以覆盖它们。现在，使用第三方组件的问题是你无法为组件使用的所有东西设置样式，当然使用第三方组件的重点是你不需要为这些配置而烦恼。

除了使用内联样式，你还可以为!important你的 CSS 样式设置 flag，但是我们又遇到了第三方组件的问题。

我建议这些方法：

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 ...
}

并将您的组件添加为：

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

如果它是一个大样式表，这些工具可以帮助您：

javascript - 如何检测覆盖 ReactJS 组件的 css 属性的内容？

问题描述

解决方案

推荐阅读