javascript - 如何检测什么覆盖了 ReactJS 组件的 css 属性？

Question

:)

我开发网页已经有一段时间了，我决定使用来自 here 的 react-calendar 组件。 .一开始，当页面是轻量级时，它开箱即用，按照网页上的示例，我的页面呈现如下:

后来在开发中，随着我向页面添加更多的复杂性，日历变得完全毁容，只能清楚地显示，如下所示:

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

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

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

有没有一种方法可以防止父级覆盖日历的 css 属性？还是我在代码中遗漏了一些重要的东西，这些东西会让日历看起来又整洁了？如果我在一个干净的元素中安装和使用它，它总是看起来很整洁(但我希望到处都有一个工作的 :D)。

提前感谢您的建议! :)

祝你有美好的一天!

Answer 1

如果您有一个 CSS 属性，您几乎总是可以覆盖它。如果 css 值已被覆盖，则无法判断(例如使用 javascript)，因为这是浏览器执行的。也许您的代码中有一些东西通过添加覆盖其所有子类的父类或覆盖其他一些的主要 CSS 样式表(如 bootstrap)来改变行为。如果是这种情况，不看代码就很难判断。

好消息

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

或者

您可以拥有几乎永远不会被覆盖的属性，具体取决于 CSS 特性。

根据 MDN web docs :

Inline styles added to an element (e.g., style="font-weight:bold") always overwrite any styles in external stylesheets, and thus can be thought of as having the highest specificity.

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

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

我建议这些方法:

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>

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

• > autoprefixer
• > prefixfree
• > less-plugin-autoprefix