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

これは、「新しい」CSSが「古い」CSSの後に読み込まれるために発生します。 古いスタイルを上書きする必要があるので、もちろんこれは本当であるはずですが、古いコードと新しいコードがあまりにも遠く離れているように見えます。

これを解決するには、新しいスタイルを古いスタイルに「近く」移動させる必要があります。 これを行う方法は、プロジェクトのアーキテクチャとビルドプロセスによって異なります。

別のオプションは、「真の」クラスがローカルでこの「サードパーティのライブラリを」ロードする場合は、あなたがしている可能性があります。

Answer 2

にのみ、ページの読み込み後に追加され、これだけ、あなたの新しいスタイルキックされていることですプラグインのCSSファイルを直接編集します。プラグインを使用するリンクで

、多分あなたは順番にロードするスタイルによって引き起こされる「ちらつき」、防ぐために、このファイルを直接編集する必要があります。私たちができるコードがないと

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