web-dev-qa-db-ja.com

Angular Material <mat-chip>からボックスシャドウを削除します

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);

この影を無効にする簡単な方法が必要だと思いますが、わかりません。

cssangularangular-materialbox-shadow
7
Daniel Kuhlwein

！importantを使用して次のCSSを追加すると、うまくいきます。

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

この投稿を読みに来るすべての新しい読者に。このクラスを「mat-chip」要素に適用して、zインデックスを削除します。これにより、影も削除されます。

class="mat-elevation-z0"
9
Deepak K J

このように「！importants」は必要ありません

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

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

スタイルを上書きしても役に立ちませんでした。代わりにmat-basic-chipを使用しました。

ドキュメントによると、「スタイルが適用されていないチップの場合、<mat-basic-chip>。次に、独自のCSSを追加して、チップの外観をカスタマイズできます。」

1
Slaj