Angular - 覆盖泳道/ngx-datatable 的 CSS答案

【问题标题】：Angular - Override CSS of swimlane/ngx-datatableAngular - 覆盖泳道/ngx-datatable 的 CSS
【发布时间】：2018-10-19 05:51:40
【问题描述】：

我需要从 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。

【问题讨论】：

标签： css angular sass ngx-datatable

【解决方案1】：

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

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

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

【讨论】：

谢谢，它有效！我也想过使用::ng-deep，但它不是已弃用，他们不是从浏览器中删除了对::ng-deep 的支持吗？
他们在找到替代品之前不会将其移除，目前没有替代品
它为我节省了一些时间！谢谢。
这很好！非常感谢。
它仍然与 angular 7 和 ngx-datatable >= 14.0.0 相关吗？有人让它在这个版本上工作吗？

【解决方案2】：

您可以尝试对 CSS 代码进行前缀/隔离。这意味着放例如一个围绕你想要设置不同样式的组件的 DIV，并为该 DIV 提供一个类（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>

您可以将样式设置为全局样式，然后使用“prefix-css”类影响 div 内的代码。

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

【讨论】：

虽然我更喜欢在组件 CSS 文件中包含组件样式...