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

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

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

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


angular css sass ngx-datatable
person Moriz Martiner    schedule 09.05.2018    source источник

Ответы (2)


arrow_upward
22
arrow_downward

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

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

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

person David    schedule 09.05.2018
comment
Спасибо, это работает! Я тоже думал об использовании ::ng-deep, но разве это не устарело, и разве они не удаляют поддержку ::ng-deep из браузеров? - person Moriz Martiner; 09.05.2018
comment
Убирать не собираются, пока не найдут замену, а пока ее нет - person David; 09.05.2018
comment
Это сэкономило мне время! Спасибо. - person Saxophonist; 08.04.2019
comment
Это мило! Большое спасибо. - person marko; 19.09.2019
comment
Актуально ли это с angular 7 и ngx-datatable ›= 14.0.0? У кого-нибудь заставить работать с этой версией? - person user7364588; 17.12.2019
comment
@David, я просто попробовал использовать angular 9 и ngx-datatable, и он отлично работает! Не уверены, что это произойдет в будущем из-за отказа от ng-deep? - person kuldeep; 17.08.2020
comment
Скорее всего, в будущем он сломается, но пока замены нет. Другой вариант - поместить rulea в styles.scss - person David; 17.08.2020

arrow_upward
3
arrow_downward

Вы можете попробовать сделать префикс / изоляцию кода 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

person Ludwig    schedule 09.05.2018
comment
Это, вероятно, также сработает, хотя я предпочитаю иметь стили компонентов в файле CSS компонентов ... - person Moriz Martiner; 09.05.2018