title: Angular - Override CSS of swimlane/ngx-datatable
body: <p>I need to remove the padding from ngx-datatable header cells and body cells.</p>
  
  <p>My actual solution looks like this:</p>
  
  <pre><code>.datatable-body-cell {
    padding: 0 !important;
  }
  
  .datatable-header-cell {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  </code></pre>
  
  <p>calendar.component.scss</p>
  
  <pre><code>@Component({
    templateUrl: './calendar.component.html',
    styleUrls: ['./calendar.component.scss'],
    encapsulation: ViewEncapsulation.None,
    changeDetection: ChangeDetectionStrategy.OnPush,
  })
  </code></pre>
  
  <p>calendar.component.ts</p>
  
  <p>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.</p>
  
  <p>Are there any other possibilities to override CSS of a library in a component without affecting the other components?</p>
  
  <p>I'm using Angular 5.</p>