AngularJS - オーバーライドCSS

Question

サードパーティのグリッド、Ag-gridを使用するAngularJSプロジェクトを継承しました。

.ag-pinned-left-header.hasCategoryCol .ag-header-cell, .ag-pinned-left-cols-viewport.hasCategoryCol .ag-row .ag-cell { 
    width: calc(100%/7) !important; 
} 

これは、すでに使用中のグリッドのための素晴らしい作品は、グリッドがきれいに7列に分割され、次のを持っているAG-グリッドのstyle.cssファイルがあります。 私の問題は、ag-gridを使って新しいコードを作成したことですが、新しいグリッドを6列に分割する必要があります.7ではなく、6つの列に分割する必要があります。デバッグにChromeを使用し、デベロッパーツールに入ると、上記のCSSが表示され、7から6に変更するとグリッドが完全に表示されます。私の質問は、私が欲しいものを達成する最も簡単な方法は何ですか？私はコードでスタイリングを調整しようとしていますが、まだ成功していません。提案？

Answer 1

他のすべてのサードパーティライブラリのCSSファイルの後に、をレンダリングするCSSファイルに変更したCSSを追加するだけです。 !importantが発生した場合、の後にもう1つの!importantが最初のものを上書きします。あなたのウェブサイトにCSSを追加することで、それはうまくいくはずです。 Adosiの答え@

.ag-pinned-left-header.hasCategoryCol .ag-header-cell, .ag-pinned-left-cols- 
viewport.hasCategoryCol .ag-row .ag-cell { 
    width: calc(100%/6) !important; 
}` 

Answer 2

好ましい解決策である - すべてがカスケーディングスタイルシートを指した後、CSS。ただし、スタイルの読み込み順序を変更できない場合は、次の代替方法があります。

!important属性を持つ外部スタイルシートで定義されたルールを、要素自体に独自の定義をインラインで追加することでオーバーライドできます。ここでは、より明白なので、background-colorプロパティを使って説明しました。

#foo { 
 
    background-color: pink !important; 
 
}

<p id="foo" style="background-color: cyan !important;">This paragraph has id foo.</p>

インラインスタイルは、常に優先されます - 例えば、最後にロードされ - ので色が表示されている1がある定義されました。

これは良い習慣とは見なされませんが、サードパーティのアセットの後にCSSルールを読み込めない場合は、代替として指定します。 （!important注釈は控えめに使用する必要があり、この場合はおそらくまったく使用しないため、第三者の図書館にバグを記録することをお勧めします）