有人知道如何在Angular Material中更改mat-spinner的颜色吗? 覆盖CSS无效。我尝试在Material文件中更改颜色,但它们只能被导入,我不能在那里做任何改变。 我想要的是自定义颜色,而不是来自预构建主题的颜色。
有人知道如何在Angular Material中更改mat-spinner的颜色吗? 覆盖CSS无效。我尝试在Material文件中更改颜色,但它们只能被导入,我不能在那里做任何改变。 我想要的是自定义颜色,而不是来自预构建主题的颜色。
在您的.css文件中添加以下代码,用于 < mat-spinner >
.mat-progress-spinner circle, .mat-spinner circle {
stroke: #3fb53f;
}
对于那些在寻求 Angular 4 / 6 / 7 中灵活解决方案的人来说,本答案将起作用。如果您想在组件级别上更改 mat-spinner 的颜色,您需要使用 ::ng-deep
选择器。了解这一点后,解决方案就非常简单。
<div class="uploader-status">
<mat-spinner></mat-spinner>
</div>
.uploader-status ::ng-deep .mat-progress-spinner circle, .mat-spinner circle {
stroke: #000000;
}
.uploader-status
css class encapsulates the component. You could just use ::ng-deep
without using a class but then whatever changes you're doing to the mat-spinner will appear in other areas of the application. Check this to learn more.
简单解决方案!
将自定义的CSS规则放在styles.css文件中,而不是component.css文件中。
.mat-progress-spinner circle, .mat-spinner circle {
stroke: #2A79FF!important;
}
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>
在您的.css/.scss组件文件样式中添加(它将仅在组件本身中起作用)
:host ::ng-deep .mat-progress-spinner circle, .mat-spinner circle {
stroke: #bada55;
}
:host ::ng-deep
的? - Antony Gibbsmat-spinner html代码:
<mat-spinner color="accent" diameter="20" class="loading"></mat-spinner>
现在是sass代码:
.mat-spinner {
::ng-deep circle {
stroke: #33dd82;
}
}
.mat-mdc-progress-spinner { --mdc-circular-progress-active-indicator-color: white; }
这对我在使用 Angular 15 时有效。
颜色是内置的。
主题 进度环的颜色可以通过使用颜色属性来更改。默认情况下,进度环使用主题的主要颜色。这可以更改为“accent”或“warn”。
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;
}
虽然有点晚了,但今天我在我的.scss
文件中使用这个方法效果很好...
.parent-element-class {
::ng-deep
.mat-progress-spinner,
.mat-spinner {
circle {
stroke: white;
}
}
}