web-dev-qa-db-fra.com

Angular Matériau mat-expansion-panneau-corps-style non appliqué

J'ai le CSS suivant dans le fichier CSS de mon composant:

.mat-expansion-panel-body {
  padding: 0;
}

Et, donc je m'attends à voir cette règle (même si elle est remplacée) apparaître pour l'élément dom suivant:

<div class="mat-expansion-panel-body">...</div>

Mais, tout ce que je vois être appliqué dans les outils de développement est:

.mat-expansion-panel-body {
  padding: 0 24px 16px;
}

J'ai remarqué que cet élément n'a pas la classe _ ngcontent-c19 que l'autre Les éléments hôtes le font, et je suppose donc que c'est un cas d'encapsulation de vue.

Cependant, après avoir lu avec la dépréciation de :: ng-deep et/deep/et d'autres constructions de perçage d'encapsulation à déprécier, quelle est une meilleure solution pour styliser cet élément à partir du fichier css de mon composant?

cssangularangular-material
12
Ruklav-Nomad

J'ai installé ::ng-deep dans le composant css, cela a fonctionné de mon côté.

::ng-deep .mat-expansion-panel-body{
     padding: 0;
}
8
Hien Nguyen

Une solution possible si vous ne voulez pas utiliser :: ng-deep est de définir le style dans votre fichier styles.css comme ceci.

.mat-expansion-panel-body {
  padding: 0 !important;
}

Cela supprimera le rembourrage, mais soyez prudent car cela le supprimera de tous les éléments de corps de panneau d'expansion de tapis. Vous pouvez contourner cela en définissant une classe spécifique sur votre panneau d'extension, puis en faisant quelque chose comme ça dans styles.css

.my-special-class .mat-expansion-panel-body {
  padding: 0;
}

Dans ce cas, vous n'avez même pas besoin! Important. En voici l'exemple.

https://stackblitz.com/edit/angular-a6necw

6
ibrcic