从Angular Material <mat-chip>中删除box-shadow

Question

有没有办法从mat-chips in Angular Material删除盒子阴影？

this

芯片似乎具有框阴影的CSS样式，但禁用此样式或覆盖它不起作用。

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

我怀疑必须有一种简单的方法来禁用这个阴影，但我无法弄明白。

Answer 1

使用！important添加以下CSS有诀窍：

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

Answer 2

这种方式不需要'！important'

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

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

Answer 3

重载样式对我没有帮助。我改用了mat-basic-chip。

Docs说：“对于未应用样式的芯片，请使用<mat-basic-chip>。然后您可以通过添加自己的CSS来自定义芯片外观。”

Answer 4

致所有新来阅读此帖子的读者。在“ mat-chip”元素中应用此类，以删除z索引。这也将消除阴影。

class="mat-elevation-z0"