web-dev-qa-db-fra.com

Supprimer l'ombre de la boîte de Angular Material <mat-chip>

Existe-t-il un moyen de supprimer l'ombre de la boîte de mat-chips in Angular Material ?

<mat-chip-list>
    <mat-chip>Papadum</mat-chip>
</mat-chip-list>

Les puces semblent avoir un style CSS pour l'ombre de la boîte, mais désactiver ce style ou le remplacer ne fonctionne pas.

transition: box-shadow 280ms cubic-bezier(.4, 0, .2, 1);

Je soupçonne qu'il doit y avoir un moyen simple de désactiver cette ombre, mais je ne peux pas le comprendre.

cssangularangular-materialbox-shadow
7
Daniel Kuhlwein

L'ajout du CSS suivant avec! Important a fait l'affaire:

mat-chip {
    transition: none !important;
    box-shadow: none !important;
}
14
Daniel Kuhlwein

À tous les nouveaux lecteurs venant lire cet article. Appliquez cette classe dans votre élément 'mat-chip' pour supprimer l'index z. Cela supprimera également l'ombre.

class="mat-elevation-z0"
9
Deepak K J

Pas besoin de "! Importants" de cette façon

@import '~@angular/material/theming';

mat-chip {
    @include mat-elevation(0);
}
2
mukade

Remplacer les styles ne m'a pas aidé. J'ai plutôt utilisé mat-basic-chip.

Docs indique: "Pour une puce sans aucun style appliqué, utilisez <mat-basic-chip>. Vous pouvez ensuite personnaliser l'apparence de la puce en ajoutant votre propre CSS. "

1
Slaj