CSS Angular Material mat-spinner 自定义颜色
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/48786027/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Angular Material mat-spinner custom color
提问by mavrise
Does anyone know how can I change mat-spinner color in Angular Material? Overriding css doesn't work. I tried changing color in material files but they can only be imported, I can't change anything there. I want it to be my custom color, not color from prebiult-themes.
有谁知道如何在 Angular Material 中更改 mat-spinner 颜色？覆盖 css 不起作用。我尝试在材质文件中更改颜色，但它们只能导入，我无法在那里更改任何内容。我希望它是我的自定义颜色，而不是来自 prebiult 主题的颜色。
回答by Nitin Wahale
Use this code for ** < mat-spinner >** add this code in your .cssfile
将此代码用于 ** < mat-spinner >** 将此代码添加到您的.css文件中
.mat-progress-spinner circle, .mat-spinner circle {
stroke: #3fb53f;
}
回答by Erwol
This answer will work for those who're looking for a flexible solution in Angular 4 / 6 / 7. If you wan't to change the color of a mat-spinner at a component level, you'll need to use the ::ng-deepselector. Knowing this, the solution is quite easy.
这个答案适用于那些正在 Angular 4 / 6 / 7 中寻找灵活解决方案的人。如果您不想在组件级别更改 mat-spinner 的颜色，则需要使用::ng-deep选择器。知道了这一点，解决方案就很简单了。
- In your html file:
- 在您的 html 文件中：
<div class="uploader-status">
<mat-spinner></mat-spinner>
</div>- In your css / scss file:
- 在您的 css / scss 文件中：
.uploader-status ::ng-deep .mat-progress-spinner circle, .mat-spinner circle {
stroke: #000000;
}.uploader-status.uploader-statuscss 类封装了组件。您可以在::ng-deep::ng-deep不使用类的情况下使用，但是您对 mat-spinner 所做的任何更改都会出现在应用程序的其他区域。Check this to learn more检查这个以了解更多信息。回答by Kamil Kie?czewski
To your .css/.scss component file style add (it will works locally - in component only)
添加到您的 .css/.scss 组件文件样式（它将在本地工作 - 仅在组件中）
:host ::ng-deep .mat-progress-spinner circle, .mat-spinner circle {
stroke: #bada55;
}
回答by Debojyoti
Easy Fix!
轻松修复！
Add custom css rules inside styles.cssinstead of component.css file
在style.css而不是 component.css 文件中添加自定义 css 规则
.mat-progress-spinner circle, .mat-spinner circle {
stroke: #2A79FF!important;
}
回答by deanis
Late to the game, but this worked well in my .scssfile today...
游戏迟到了，但这在我.scss今天的文件中运行良好......
.parent-element-class {
::ng-deep
.mat-progress-spinner,
.mat-spinner {
circle {
stroke: white;
}
}
}
回答by MORTABIT SOUFIANE
mat-spinner html code :
mat-spinner html 代码：
<mat-spinner color="accent" diameter="20" class="loading"></mat-spinner>
<mat-spinner color="accent" diameter="20" class="loading"></mat-spinner>
And now sass code :
现在 sass 代码：
.mat-spinner {
::ng-deep circle {
stroke: #33dd82;
}
}
回答by Nour Lababidi
Color is build in.
颜色是内置的。
Theming The color of a progress-spinner can be changed by using the color property. By default, progress-spinners use the theme's primary color. This can be changed to 'accent' or 'warn'.
主题 可以使用 color 属性更改进度微调器的颜色。默认情况下，进度微调器使用主题的主要颜色。这可以更改为“重音”或“警告”。
https://material.angular.io/components/progress-spinner/overview
https://material.angular.io/components/progress-spinner/overview
example
例子
<mat-spinner color="warn"></mat-spinner>
回答by VineethaBoyidi
In your css file mention like below:
::ng-deep.mat-progress-spinner circle,.mat-spinner circle {stroke: #f2aa4cff !important;}
Here, ::ng-deep will be used to force a style.
在这里， ::ng-deep 将用于强制风格。
!important here what says is that "this is Important",you ignore all other rules and apply this rule.
!important 这里说的是“这很重要”，您忽略所有其他规则并应用此规则。
回答by user2569050
Sample Color, strokeWidth, diameter and title
示例颜色、笔划宽度、直径和标题
<mat-spinner strokeWidth="24" [diameter]="85" color="warn" title="Tooltip text here"></mat-spinner>
回答by Mehrdad
use this code
使用此代码
<md-progress-circular md-diameter="20px"></md-progress-circular>
md-progress-circular path {
stroke: purple;
}
