Angular - 覆盖 swimlane/ngx-datatable 的 CSS

Question

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

- Moriz Martiner

Answer 1

保留默认组件封装并使用ng-deep

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

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

- David

---

他们不会移除它，直到找到替代品，但目前还没有。 - David

它为我节省了一些时间！谢谢。 - Saxophonist

这很好！非常感谢。 - marko

在 Angular 7 及 ngx-datatable >= 14.0.0 版本中，它仍然相关吗？有人使其与此版本一起工作了吗？ - user7364588

@David，我刚刚尝试了使用Angular 9和ngx-datatable，它可以正常工作！不确定这是否会因为ng-deep过时而在未来出现问题？ - kuldeep

Answer 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

- Ludwig

---

这个可能也能够工作，但我更喜欢在组件的 CSS 文件中进行组件样式设置... - Moriz Martiner

如果您只想修改标题和表格单元格，可以使用<ngx-datatable-column>的headerClass和cellClass属性。但这也需要全局CSS规则 :/ - Véger Lóránd