泳道/ngx-datatable的角度覆盖CSS。-Angular-OverrideCSSofswimlane/ngx-datatable

I need to remove the padding from ngx-datatable header cells and body cells.

我需要从ngx-datatable头单元格和主体单元格中删除填充。

My actual solution looks like this:

我的实际解是这样的:

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

.datatable-header-cell {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

calendar.component.scss

calendar.component.scss

@Component({
  templateUrl: './calendar.component.html',
  styleUrls: ['./calendar.component.scss'],
  encapsulation: ViewEncapsulation.None,
  changeDetection: ChangeDetectionStrategy.OnPush,
})

calendar.component.ts

calendar.component.ts

The problem I encountered is that I need to disable the ViewEncapsulation override the ngx-datatable CSS classes datatable-body-cell and datatable-header-cell. Since I use the ngx-datatable in other components as well, the CSS remains overridden when I navigate to the other components. Only when I refresh the CSS in the other components is shown as it should.

我遇到的问题是，我需要禁用view封装，覆盖ngx-datatable的CSS类datatable-body-cell和datatable-header-cell。由于我也在其他组件中使用ngx-datatable，所以当我导航到其他组件时，CSS仍然被覆盖。只有当我在其他组件中刷新CSS时，才会显示它应该显示的样子。

Are there any other possibilities to override CSS of a library in a component without affecting the other components?

在组件中重写库的CSS而不影响其他组件的可能性是否存在?

I'm using Angular 5.

我用5角。

2 个解决方案

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

.prefix-css .datatable-body-cell {
  padding: 0 !important;
}

.prefix-css .datatable-header-cell {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

  ... here the code for your datatable