web-dev-qa-db-fra.com

Angular - Ignorer les CSS de swimlane/ngx-datatable

Je dois supprimer le remplissage des cellules d'en-tête et des cellules corporelles ngx-datatable.

Ma solution actuelle ressemble à ceci:

.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

Le problème que j'ai rencontré est que je dois désactiver ViewEncapsulation pour remplacer les classes CSS ngx-datatable datatable-body-cell et datatable-header-cell. Puisque j'utilise également ngx-datatable dans d'autres composants, le CSS reste remplacé lorsque je navigue vers les autres composants. Ce n'est que lorsque j'actualise que le CSS est affiché dans les autres composants.

Existe-t-il d'autres possibilités pour remplacer le code CSS d'une bibliothèque dans un composant sans affecter les autres composants?

J'utilise Angular 5.

cssangularsassngx-datatable
5
Moriz Martiner

Conservez l’encapsulation des composants par défaut et utilisez ng-deep

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

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

7
David

Vous pouvez essayer de préfixer/isoler le code CSS. Cela signifie mettre par exemple une DIV autour du composant pour lequel vous voulez définir un style différent et lui donner une classe (prefix-css).

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

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

Le code HTML ressemble alors à ceci:

<div class="prefix-css">
  ... here the code for your datatable
</div>

Vous pouvez rendre ces styles globaux et simplement affecter le code à l'intérieur de la div avec la classe 'prefix-css'.

Regardez cet exemple: https://stackblitz.com/edit/angular-qlkcs3

1
Ludwig