web-dev-qa-db-ja.com

Angular Material mat-spinner custom color

Angular Material）でマットスピナーの色を変更する方法を知っている人はいますか？cssのオーバーライドは機能しません。私はそれを私のテーマの色にしたいのです。

cssangularangular-materialspinner
18
mavrise

このコードを** <mat-spinner> **に使用して、このコードを。cssファイルに追加します

.mat-progress-spinner circle, .mat-spinner circle {
stroke: #3fb53f;
}
26
Nitin Wahale

簡単な修正！

Component.cssファイルの代わりにstyles.css内にカスタムcssルールを追加します

.mat-progress-spinner circle, .mat-spinner circle {
    stroke: #2A79FF!important;
}
4
Debojyoti

色は組み込まれています。

テーマプログレススピナーの色は、colorプロパティを使用して変更できます。デフォルトでは、進行スピナーはテーマのプライマリカラーを使用します。これは「アクセント」または「警告」に変更できます。

https://material.angular.io/components/progress-spinner/overview

例

<mat-spinner color="warn"></mat-spinner>
3
Nour Lababidi

ゲームに遅れたが、これは私の.scssファイルを今日...

.parent-element-class {
    ::ng-deep 
    .mat-progress-spinner,
    .mat-spinner {
        circle {
            stroke: white;
        }
    }
}
2
deanis

.css/.scssコンポーネントファイルスタイルに追加します（ローカルでのみ機能します-コンポーネントのみ）

:Host ::ng-deep .mat-progress-spinner circle, .mat-spinner circle {   
    stroke: #bada55;
}
1
Kamil Kiełczewski

このコードを使用

<md-progress-circular md-diameter="20px"></md-progress-circular>

md-progress-circular path {
  stroke: purple;
}
0
Mehrdad

これは、カスタムテーマを実行することで最適に達成されます。

https://material.angular.io/guide/theming

0
GotStu

サンプルの色、ストローク幅、直径、タイトル

<mat-spinner strokeWidth="24" [diameter]="85" color="warn" title="Tooltip text here"></mat-spinner>
0
user2569050