web-dev-qa-db-ja.com

Angular-swimlane / ngx-datatableのCSSを上書き

Ngx-datatableヘッダーセルとボディセルからパディングを削除する必要があります。

私の実際の解決策は次のようになります：

.datatable-body-cell {
  padding: 0 !important;
}

.datatable-header-cell {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

calendar.component.scss

@Component({
  templateUrl: './calendar.component.html',
  styleUrls: ['./calendar.component.scss'],
  encapsulation: ViewEncapsulation.None,
  changeDetection: ChangeDetectionStrategy.OnPush,
})

calendar.component.ts

私が遭遇した問題は、ViewEncapsulationを無効にして、ngx-datatable CSSクラスdatatable-body-cellおよびdatatable-header-cellをオーバーライドする必要があることです。他のコンポーネントでもngx-datatableを使用しているため、他のコンポーネントに移動してもCSSはオーバーライドされたままです。他のコンポーネントのCSSを更新したときにのみ、表示されます。

他のコンポーネントに影響を与えることなく、コンポーネント内のライブラリのCSSをオーバーライドする他の可能性はありますか？

Angular 5.を使用しています。

cssangularsassngx-datatable
8
Moriz Martiner

デフォルトのコンポーネントのカプセル化を維持し、ng-deep

:Host ::ng-deep .datatable-body-cell {
  padding: 0 !important;
}

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

16
David

あなたはCSSコードの接頭辞/分離を試みることができます。つまり、たとえば別のスタイルを設定し、そのDIVにクラス（prefix-css）を設定するコンポーネントの周りのDIV。

.prefix-css .datatable-body-cell {
  padding: 0 !important;
}

.prefix-css .datatable-header-cell {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

HTMLコードは次のようになります。

<div class="prefix-css">
  ... here the code for your datatable
</div>

そのスタイルをグローバルにして、 'prefix-css'クラスでdiv内のコードに影響を与えることができます。

この例を見てください： https://stackblitz.com/edit/angular-qlkcs

2
Ludwig