Remove box-shadow from Angular Material

Question

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.

use viewEncapsulation.none. If mat-chips has inline style, you can use !important in your css — Eliseo, Dec 06 '17 at 17:42

Deepak K J · Accepted Answer · 2019-07-13T09:46:09.757

40

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"

edited Jul 13 '19 at 09:46

answered Jul 13 '19 at 09:39

Deepak K J

1

BTW, works for `mat-button` and presumably all such mat- controls too. – Krishnan May 21 '21 at 11:47

score 25 · Answer 2 · answered Dec 07 '17 at 18:27

25

Adding the following CSS with !important did the trick:

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

answered Dec 07 '17 at 18:27

Daniel Kuhlwein

score 8 · Answer 3 · answered Jan 24 '20 at 14:37

8

No need for '!importants' this way

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

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

answered Jan 24 '20 at 14:37

mukade

this is great way what about mat-fab since it is added to button – Dživo Jelić Mar 13 '20 at 00:02
@DživoJelić do something like this `.mat-fab:not([class*=mat-elevation-z]), .mat-mini-fab:not([class*=mat-elevation-z]) { box-shadow: 0px 3px 5px -1px rgb(0 0 0 /0%), 0px 6px 10px 0px rgb(0 0 0 / 0%), 0px 1px 18px 0px rgb(0 0 0 / 0%); }` – NoobCoder Aug 02 '21 at 11:13

score 2 · Answer 4 · edited Sep 06 '19 at 00:45

2

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."

edited Sep 06 '19 at 00:45

Jason Aller

answered Sep 05 '19 at 20:43

Slaj

4 Answers4