CODEWITHSUNDEEP
cssangularangular-materialbox-shadow
Daniel Kuhlwein
Daniel Kuhlwein

Reputation: 631

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.

Upvotes: 21

Views: 42654

Answers (4)

mukade
mukade

Reputation: 660

No need for '!importants' this way

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

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

Upvotes: 9

Slaj
Slaj

Reputation: 21

Overriding styles didn't help me. I have used mat-basic-chip instead.

Docs says: "For a chip with no styles applied, use <mat-basic-chip>. You can then customize the chip appearance by adding your own CSS."

Upvotes: 2

Deepak K J
Deepak K J

Reputation: 514

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"

Upvotes: 42

Daniel Kuhlwein
Daniel Kuhlwein

Reputation: 631

Adding the following CSS with !important did the trick:

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

Upvotes: 28

Related Questions