web-dev-qa-db-ja.com

ag-グリッドヘッダースタイルはコンポーネントのCSSで変更されません

アプリケーションでag-Gridを使用していますが、デフォルトのテーマ（ag-theme-balham）で問題なく動作します。

ある特定のコンポーネントでヘッダーの背景色を変更したいのですが、component.scssファイルにCSSを追加しても何も起こりません。

私はangular-cli.jsonファイルにag-Gridcssを追加しました

  "styles": [
    "../node_modules/font-awesome/scss/font-awesome.scss",
    "../node_modules/ag-grid/dist/styles/ag-grid.css",
    "../node_modules/ag-grid/dist/styles/ag-theme-balham.css",
    "styles.scss"
  ],

Component.scssファイルに次のCSSがあります

.ag-theme-balham .ag-header {
    background-color: #e0e0e0;
}

しかし、何も起こらず、色はヘッダーに適用されません。

angularag-gridag-grid-ng2
4
Ennio

代わりにヘッダーセルクラスをオーバーライドします

.ag-theme-balham .ag-header-cell{
    background-color: #e0e0e0;
}

ヘッダーグループがある場合は

.ag-theme-balham .ag-header-cell, .ag-theme-balham .ag-header-group-cell{
    background-color: #e0e0e0;
}
3
koolhuman

:: ng-deepコンビネータを使用してみてください

https://angular.io/guide/component-styles#deprecated-deep--and-ng-deep

::ng-deep .ag-theme-balham .ag-header {
    background-color: #e0e0e0;
}

それが機能しない場合は、cssをグローバルスタイルシートに入れて、スタイルが正しくオーバーライドされているかどうかを確認してください

5
David

オーバーライドbackground-colorと!important。

あれは：

:Host {
    ::ng-deep { background-color: }
0
subrat22

これは少し古い質問ですが、今これに参加する人にとっては、このソリューションは私にとってはうまくいきました。書き込む必要のあるタグは次のとおりです。

::ng-deep .ag-theme-balham .ag-header-cell-label{
/* your css here*/}

タグも!importantも機能する可能性があります

0
Faris Kapo