有誰知道我如何改變有角材料的mat-spinner顏色？ 重寫css是行不通的。我試著在材質文件中改變顏色，但是它們只能被導入，我不能在那里改變任何東西。 我希望它是我的自定義顏色，而不是prebiult-themes的顏色。
將此代碼用于* * & ltmat-spinner >**將此代碼添加到您的。css文件
.mat-progress-spinner circle, .mat-spinner circle {
stroke: #3fb53f;
}這個答案將適用于那些在Angular 4 / 6 / 7尋找靈活解決方案的人。如果您不想在組件級別更改mat-spinner的顏色，您需要使用::ng-deep選擇器。了解了這一點，解決方案就相當容易了。
在html文件中:
<div class="uploader-status">
<mat-spinner></mat-spinner>
</div>輕松搞定！
在styles.css而不是component.css文件中添加自定義css規則
.mat-progress-spinner circle, .mat-spinner circle {
stroke: #2A79FF!important;
}敬你的。css/。scss組件文件樣式添加(它將在本地工作-僅在組件中)
:host ::ng-deep .mat-progress-spinner circle, .mat-spinner circle {
stroke: #bada55;
}如果你不想弄亂全局css，并且需要一種方法在應用程序的不同區域將微調器設置為不同的顏色，我強烈建議為它創建一個指令。
import { Directive, Input, ElementRef, AfterViewInit } from '@angular/core';
@Directive({
selector: "[customSpinner]"
})
export class CustomSpinnerDirective implements AfterViewInit{
@Input() color: string;
constructor(
private elem: ElementRef
){}
ngAfterViewInit(){
if(!!this.color){
const element = this.elem.nativeElement;
const circle = element.querySelector("circle");
circle.style.stroke = this.color;
}
}
}那么微調器應該這樣工作:
<mat-spinner diameter="22" customSpinner color="#fff"></mat-spinner>mat-spinner html代碼:
& ltmat-spinner color = " accent " diameter = " 20 " class = " loading " >& lt/mat-spinner & gt；
現在是sass代碼:
.mat-spinner {
::ng-deep circle {
stroke: #33dd82;
}
}顏色是內置的。
主題 可以使用color屬性來更改進度微調器的顏色。默認情況下，進度微調器使用主題的主要顏色。這可以更改為“重音”或“警告”。
https://material . angular . io/components/progress-spinner/overview
例子
<mat-spinner color="warn"></mat-spinner>我認為這里的關鍵是它必須在全局styles.css文件中。如果放在那里，下面的解決方案確實有效(如果使用ng add添加，當材料被添加到項目時，CSS文件應該受到影響:
.mat-progress-spinner circle, .mat-spinner circle {
stroke: #b68200;
}當然，如果您想要獨特風格的微調器，您也可以向組件添加類并指定不同的選擇器。然而，似乎這些類必須在全局CSS文件中。
游戲來晚了，但這在我的。今日scss文件...
.parent-element-class {
::ng-deep
.mat-progress-spinner,
.mat-spinner {
circle {
stroke: white;
}
}
}在styles.css文件中，添加...
::ng-deep .mat-progress-spinner circle, .mat-spinner circle {
stroke: #2A79FF!important;
}默認情況下，角度材質將為微調器提供默認的原色。 您可以使用調色板中的3種顏色，即原色、強調色和警告色。 但是，如果您需要不同的顏色，請考慮以下選項。
簡單的方法(不推薦) 你可以使用任何一種方法來覆蓋其他答案中提到的css。如果您不希望spinner在整個應用程序中使用相同的顏色，我建議在spinner元素上使用父類。
正確的和推薦的方法是我們使用自定義主題的材料。如果您已經有客戶，您可以 我喜歡創建一個自定義的mixin，名為
//這里的$primary-color是您希望微調器顯示的顏色 @ mixin spinner-custom-theme($ primary-color，$accent-color，$warn-color) { $ custom-spinner-theme-primary:mat-palette($ primary-color)； $ custom-spinner-theme-accent:mat-palette($ accent-color，A200，A100，A400)； $ custom-spinner-theme-warn:mat-palette($ warn-color)；
$ custom-spinner-theme:mat-light-theme($ custom-theme-primary，$custom-theme-accent，$ custom-theme-warn)；
@ include mat-progress-spinner-theme($ custom-spinner-theme)； }
現在轉到file where @ include angular-material-theme($ custom-theme)； 已經寫好了 和@include your mixin就在@ include angular-material-theme($ custom-theme)下面；
想知道更多關于如何創建自定義主題的信息，你可以點擊這里查看這個博客
。mat-MDC-progress-spinner {-MDC-circular-progress-active-indicator-color:白色；}
這為我使用Angular 15工作。
樣本顏色、筆畫寬度、直徑和標題
<mat-spinner strokeWidth="24" [diameter]="85" color="warn" title="Tooltip text here"></mat-spinner>這里，::ng-deep將用于強制樣式。
！重要這里說的是“這很重要”，你忽略其他所有規則，應用這個規則。
將上面的代碼片段添加到你的樣式文件中，這將有助于自定義墊子旋轉器的顏色
使用css變量:
:root {
--color-spinner: #3f51b5;
}
.mat-mdc-progress-spinner {
--mdc-circular-progress-active-indicator-color: var(--color-spinner);
}沒有css變量:
.mat-mdc-progress-spinner {
--mdc-circular-progress-active-indicator-color: red;
}這最好通過定制主題來實現。
https://material.angular.io/guide/theming
使用此代碼
<md-progress-circular md-diameter="20px"></md-progress-circular>
md-progress-circular path {
stroke: purple;
}如果你們想自定義網頁上的每個微調器。你可以這樣做:
svg .mat-progress-spinner circle, .mat-spinner circle {
stroke: inherit;
}現在在mat-spinner上添加類:
<mat-spinner class="custom-spinner-color"></mat-spinner>在css文件中:
.custom-spinner-color {
stroke: #234188;
}這就是我想要實現的目標。我想如果你在尋找這個問題，你可能也想要同樣的答案。
Mat progress spinner自定義計時器，我根據傳遞給mat spinner的值更改為3種不同的顏色。請參考:https://material . angular . io/components/progress-spinner/examples
<mat-progress-spinner class="mat-spinner" [color]="progressColor"
[diameter]="170" [strokeWidth]="14"[mode]="'determinate'"
[value]="progressLabel">
</mat-progress-spinner>Ts文件
timer: number = TIMER; // say 60 seconds
progressColor: ThemePalette = 'accent';
timerPercent: number = 0;
progressLabel: number = 100;
startTimer() {
this.timer = TIMER;
this.timerInterval = setInterval(() => {
if (this.timer <= 0) {
clearInterval(this.timerInterval);
this.timerFinish();
}
if (this.timer > 0) {
this.progressColor =
this.timerPercent > 69
? 'warn'
: this.timerPercent > 49
? 'primary'
: 'accent';
this.timer--;
this.timerPercent = (100 * (TIMER - this.timer)) / TIMER;
this.progressLabel = 100 - this.timerPercent;
}
}, 1000);
}對我來說，這是我在不影響全局的情況下做到的:
在我的。鋼性鑄鐵
::ng-deep .customColorSpinner circle {stroke: #4e1e1e!important;}在我的。超文本標記語言
<mat-spinner class="customColorSpinner"></mat-spinner>您可以使用自定義角度指令來解決這個問題。該指令允許您在mat-spinner上設置自定義顏色，如下所示:
<mat-progress-spinner spinnerColor="#09ff00"></mat-progress-spinner>我這里有一篇文章解釋了這一點，并向您徹底展示了如何解決這個問題
在mat-spinner所在的component.scss中，只需添加以下內容:
::ng-deep .mat-mdc-progress-spinner {
--mdc-circular-progress-active-indicator-color: #7D469A;
}使用angular 13，我以這種方式改變顏色:
<mat-progress-spinner
color="primary"
mode="indeterminate"
value="50">
</mat-progress-spinner>然后我定義了。我需要使用的單個組件的css文件。
::ng-deep .mat-progress-spinner circle, .mat-spinner circle {
stroke: #2aff5c!important;
}如果您需要在多個組件中重用它，將它放在全局css文件中可能是個好主意，在這種情況下，您可能不需要指定::ng-deep。