angularjs - CSS 瞬间显示被覆盖的样式

Question

目前，我正在使用来自 third-party library for a UI toggle button 的指令.我稍微更改了切换按钮的背景颜色和左/右位置以满足我的业务规范。例如。开箱即用的款式为浅绿色为真，浅红色为假；我将其更改为深绿色表示真，浅灰色表示假。我还将拨动开关的位置向左移动了一点。所有这一切都很好。

我遇到的一个问题是，在带有切换按钮的页面呈现时的一毫秒内，我看到旧样式迅速从开箱即用的样式变为我的更新样式。在这个事实之后没有任何其他样式故障，只是初始加载显示元素上有一些快速移动。这不是一个大问题，但我似乎无法查明问题或知道为什么会这样。有什么想法吗？可能是 CSS 层次结构的问题？

与问题相关的注释:

• 我使用检查器找到我需要覆盖的类，因为指令本身只使用了一个 nz-toggle 标签。
• 我正在使用 !important 进行覆盖。我读到这本身就是不好的做法，但它正在整个元素中使用，并已被确立为覆盖样式的“我们的标准”

这是我的 CSS 文件中的一条规则与开箱即用的规则的示例:

.nz-toggle-wrap.true {
background-color: #089900 !important;
right: -16px !important;
width: 50px !important;
height: 28px !important;
}

对比

.nz-toggle-wrap.true {background-color: #60bd68;}

有什么想法吗？

Answer 1

发生这种情况是因为您的"new"CSS 在“旧”CSS 之后加载。当然无论如何这应该是正确的，因为您想覆盖旧样式，但似乎新旧代码彼此相距太远，因此您设法看到它发生了变化。

要解决这个问题，您必须将新样式“更接近”旧样式。实现方式取决于您的元素架构和构建过程。

另一种选择是“true”类仅在页面加载后添加，因此只有在那时您的新样式才会生效。