Question

目前，我正在使用third-party library for a UI toggle button的指令。我稍微更改了切换按钮的背景颜色和左/右位置以符合我的业务规格。例如。开箱即用的风格为浅绿色，真实，浅红色为假;我将其改为深绿色为真，浅灰色为假。我还将位置向左移动了一个位置。所有这一切都很好。

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

与该问题相关的注释：

我使用了检查器来查找我需要覆盖的类，因为该指令本身只使用nz-toggle标记。
我正在使用!important覆盖。我已经读到这本身就是不好的做法，但它正在整个项目中使用，并且已经建立为＆＃34;我们的标准＆＃34;覆盖样式

以下是我的CSS文件中一条规则的示例，与开箱即用的规则相比：

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

VS。

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

有什么想法吗？

Answer 1

这是因为你的＆＃34;新＆＃34; CSS加载了＃34; old＆＃34; CSS。当然，无论如何这应该是真的，因为你想要覆盖旧的风格，但似乎旧的和新的代码彼此相距太远，因此你设法看到它发生了变化。

要解决这个问题，你必须将新款式＆＃34;更接近＆＃34;旧的风格。这样做的方式取决于您的项目架构和构建过程。

另一个选择是该课程＆＃34; true＆＃34;仅在页面加载后添加，因此只有新样式才会启动。

Answer 2

如果您要加载此第三方库＆＃34;在本地，您可能必须直接编辑插件的CSS文件。

使用您链接的插件，可能需要直接编辑此文件以防止＆＃34;闪烁＆＃34;，这是由按顺序加载的样式引起的：

https://github.com/tannerlinsley/nz-toggle/blob/master/src/nz-toggle.styl

CSS显示瞬间覆盖的样式

2 个答案: