Angular - 覆盖泳道/ 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.

Answer 1

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

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

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