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.

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

Angular - 覆盖泳道/ ngx-datatable

2 个答案: