从 Angular Material <mat-chip> 中移除 box-shadow答案

【问题标题】：Remove box-shadow from Angular Material <mat-chip>从 Angular Material <mat-chip> 中移除 box-shadow
【发布时间】：2018-05-20 15:39:05
【问题描述】：

有什么方法可以从mat-chips in Angular Material 中移除 box-shadow 吗？

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

这些芯片似乎具有用于 box-shadow 的 CSS 样式，但禁用此样式或覆盖它不起作用。

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

我怀疑必须有一种简单的方法来禁用这个阴影，但我想不通。

【问题讨论】：

【解决方案1】：

使用 !important 添加以下 CSS 就可以了：

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

【讨论】：

【解决方案2】：

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

class="mat-elevation-z0"

【讨论】：

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

这种方式不需要'！importants'

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

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

【讨论】：

这是 mat-fab 的好方法，因为它已添加到按钮中
@DživoJelić 做这样的事情.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%); }