I need to remove the padding from ngx-datatable header cells and body cells.
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
@Component({
templateUrl: './calendar.component.html',
styleUrls: ['./calendar.component.scss'],
encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush,
})
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.
Are there any other possibilities to override CSS of a library in a component without affecting the other components?
I'm using Angular 5.
Keep default component encapsulation and use ng-deep
:host ::ng-deep .datatable-body-cell {
padding: 0 !important;
}
https://angular.io/guide/component-styles#deprecated-deep--and-ng-deep
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With