从 Angular Material <mat-chip> 中删除框阴影

Question

有什么方法可以从 mat-chips in Angular Material 中删除框阴影？

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

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

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

我怀疑必须有一种简单的方法来禁用此阴影，但我无法弄清楚。

Answer 1

添加以下 CSS 和 !important 成功了：

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

Answer 2

致所有阅读本文的新读者post。在 'mat-chip' 元素中应用此 class 以删除 z 索引。这也将删除阴影。

class="mat-elevation-z0"

Answer 3

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

文档说："For a chip with no styles applied, use <mat-basic-chip>. You can then customize the chip appearance by adding your own CSS."

Answer 4

这种方式不需要'!importants'

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

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

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