Angular

Question

我需要删除 ngx-datatable header 个单元格和 body 个单元格的填充。

我的实际解决方案如下所示：

.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.

Answer 1

保持默认组件封装，使用ng-deep

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

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

Answer 2

您可以尝试执行 css 代码的 prefixing/isolation。这意味着把例如a DIV 在你想要设置不同样式的组件周围，并给它 DIV a class (prefix-css).

.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>

您可以使该样式成为全局样式，然后只影响 div 内的代码 class 'prefix-css'。

看这个例子：https://stackblitz.com/edit/angular-qlkcs3

Angular - 覆盖 swimlane/ngx-datatable 的 CSS

Angular - Override CSS of swimlane/ngx-datatable

css

sass

ngx-datatable