Search code examples
cssangularangular-materialbox-shadow

Remove box-shadow from Angular Material <mat-chip>

Is there any way to remove the box-shadow from mat-chips in Angular Material?

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

The chips appear to have a CSS style for the box-shadow, but disabling this style or overriding it doesn't work.

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

I suspect there must be a simple way to disable this shadow, but I can't figure it out.

Solution

  • To all new readers coming to read this post. Apply this class in your 'mat-chip' element to remove z index. This will remove shadow also. 

    class="mat-elevation-z0"