Angular - переопределить CSS для дорожки / ngx-datatable

Question

Мне нужно удалить заполнение из ячеек заголовка с данными ngx и ячеек тела.

Мое реальное решение выглядит так:

.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, переопределяя классы CSS ngx-datatable datatable-body-cell и datatable-header-cell. Поскольку я использую ngx-datatable и в других компонентах, CSS остается переопределенным, когда я перехожу к другим компонентам. Только когда я обновляю CSS в других компонентах, отображается как должно.

Существуют ли другие возможности переопределить CSS библиотеки в компоненте, не затрагивая другие компоненты?

Я использую Angular 5.

Answer 1

Вы можете попробовать сделать префикс / изоляцию кода CSS. Это значит положить, например. DIV вокруг компонента, для которого вы хотите установить другой стиль и дать этому DIV класс (prefix-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>

Вы можете сделать эти стили глобальными, а затем просто воздействовать на код внутри div с помощью класса 'prefix-css'.

Посмотрите на этот пример: https://stackblitz.com/edit/angular-qlkcs3

Answer 2

Сохранить инкапсуляцию компонента по умолчанию и использовать ng-deep

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

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