CSS Angular - Material：Progressbar 自定义颜色？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/48869915/
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: Progressbar custom color?
提问by Mka24
I am now trying for hours. I use Material2 and simply want to change the color of the progress-bar. I know there are those themes (primary/accent/warn) but I want to have a cutom color (green) for my progressbar.
我现在正在尝试几个小时。我使用 Material2，只是想更改进度条的颜色。我知道有这些主题（主要/重音/警告），但我想为我的进度条使用自定义颜色（绿色）。
I already tried the wierdest css-combinations.. but with no effort. Maybe someone had the same problem?
我已经尝试了最奇怪的 css 组合......但没有努力。也许有人有同样的问题？
采纳答案by TheUnreal
I can suggest to change one of the premade primary/warn/accent colors to your custom color.
我可以建议将预制的原色/警告色/强调色之一更改为您的自定义颜色。
In your styles.scss(if your style file is css you will have to change it to support scss):
在你的styles.scss（如果你的样式文件是 css 你必须改变它以支持 scss）：
@import '~@angular/material/theming';
// Plus imports for other components in your app.
// Include the common styles for Angular Material. We include this here so that you only
// have to load a single css file for Angular Material in your app.
// Be sure that you only ever include this mixin once!
@include mat-core();
// Define the palettes for your theme using the Material Design palettes available in palette.scss
// (imported above). For each palette, you can optionally specify a default, lighter, and darker
// hue.
$mat-blue: (
50: #e3f2fd,
100: #bbdefb,
200: #90caf9,
300: #64b5f6,
400: #42a5f5,
500: #2196f3,
600: #1e88e5,
700: #1976d2,
800: #1565c0,
900: #0d47a1,
A100: #82b1ff,
A200: #448aff,
A400: #2979ff,
A700: #2B66C3,
contrast: (
50: $black-87-opacity,
100: $black-87-opacity,
200: $black-87-opacity,
300: $black-87-opacity,
400: $black-87-opacity,
500: white,
600: white,
700: white,
800: $white-87-opacity,
900: $white-87-opacity,
A100: $black-87-opacity,
A200: white,
A400: white,
A700: white,
)
);
$candy-app-primary: mat-palette($mat-blue, A700);
$candy-app-accent: mat-palette($mat-orange, A200, A100, A400);
// The warn palette is optional (defaults to red).
$candy-app-warn: mat-palette($mat-red);
// Create the theme object (a Sass map containing all of the palettes).
$candy-a-theme($candy-app-theme);
pp-theme: mat-light-theme($candy-app-primary, $candy-app-accent, $candy-app-warn);
// Include theme styles for core and each component used in your app.
// Alternatively, you can import and @include the theme mixins for each component
// that you are using.
@include angular-material
回答by Simonca
You can use ::ng-deepselector to achieve what you want, this answerhas some info on it.
你可以使用::ng-deep选择器来实现你想要的，这个答案有一些信息。
How I did it:
我是如何做到的：
CSS
CSS
::ng-deep .mat-progress-bar-fill::after {
background-color: #1E457C;
}
::ng-deep .mat-progress-bar-buffer {
background: #E4E8EB;
}
::ng-deep .mat-progress-bar {
border-radius: 2px;
}
HTML
HTML
<mat-progress-bar mode="determinate" value="{{progress}}"></mat-progress-bar>
And the result is this:
结果是这样的：
EDIT:
编辑：
I found a way to avoid using ::ng-deepas it will be removed from angular soon.
It seems that if you move your style from your component.cssfile to the global styles.cssfile it will work without ::ng-deep.
我找到了一种避免使用的方法，::ng-deep因为它很快就会从 angular 中移除。似乎如果您将样式从component.css文件移动到全局styles.css文件，则无需::ng-deep.
So, a style defined above can change in
因此，上面定义的样式可以在
mat-progress-bar .mat-progress-bar-buffer {
background: #E4E8EB;
}
Move it to styles.cssand it will be applied like this:
将其移动到styles.css，它将像这样应用：
LATER EDIT
稍后编辑
As an explanation why setting styles in the global style sheet works:
作为为什么在全局样式表中设置样式有效的解释：
For components the default is that angular adds a attribute to each DOM-element of a component, and then adds the same attribute to every class in the css for the same component. Adding styles to a global stylesheet does not add these attributes, hence the style will be applied. (thanks Jompisfor this)
对于组件，默认是 angular 为组件的每个 DOM 元素添加一个属性，然后将相同的属性添加到同一组件的 css 中的每个类。向全局样式表添加样式不会添加这些属性，因此将应用样式。 （为此感谢Jompis）
This worked for me on a new project. I did not checked specifically with the old code but the conditions are the same and there is no reason for it not to work.
这对我来说在一个新项目上有用。我没有专门检查旧代码，但条件相同，没有理由不工作。
回答by Thiago C. S Ventura
Since nobody mentioned so far...
由于到目前为止没有人提到...
He's how I solved it.
他就是我解决的方法。
@Meet Dave is right about his approach. But you should use encapsulation: ViewEncapsulation.None(disables css modules)
@Meet Dave 关于他的方法是正确的。但是你应该使用encapsulation: ViewEncapsulation.None(disables css modules)
Something like this:
像这样的东西：
Component
成分
@Component({
selector: '...',
templateUrl: '...',
styleUrls: ['...'],
encapsulation: ViewEncapsulation.None,
})
Sass(in my case)
Sass（就我而言）
.audio-progress-bar {
&.mat-progress-bar {
height: 10px;
}
.mat-progress-bar-fill::after {
background-color: #37474f;
}
.mat-progress-bar-buffer {
background-color: #90a4ae;
}
/* remove animation and the dots*/
.mat-progress-bar-background {
animation: none;
background-color: #eceff1;
fill: #eceff1;
}
}
View
看法
<mat-progress-bar
class="audio-progress-bar"
mode="buffer"
></mat-progress-bar>
回答by Meet Dave
Update:
更新：
Avoid using deep, TL;DR: Deep is technically invalid (like, deeprecated :p)
避免使用 deep, TL;DR: Deep 在技术上是无效的（例如，deeprecated :p）
For more info refer: The use of /deep/ and >>> in Angular 2
有关更多信息，请参阅：Angular 2 中 /deep/ 和 >>> 的使用
Now, to change the color of mat-progress bar, Here is how I got it working,
现在，要更改垫进度条的颜色，这是我的工作方式，
Head over to your styles.scss file (or the main css/scss file in your project)
转到您的 styles.scss 文件（或您项目中的主要 css/scss 文件）
Add this class -->
添加这个类-->
.green-progress .mat-progress-bar-fill::after {
background-color: green !important;
}
Your mat-progress should use the above class, like -->
你的 mat-progress 应该使用上面的类，比如 -->
<mat-progress-bar class="green-progress" mode="indeterminate"></mat-progress-bar>
回答by str8up7od
Angular 8 solution:
角8解决方案：
for me it was putting my styling in a top level .scssfile. Also had to select in .scssas follows:
对我来说，它是将我的样式放在顶级.scss文件中。还得选择.scss如下：
html:
html：
<mat-progress-bar [ngClass]="passwordStatusBarColor"
aria-label="Password strength meter"
mode="determinate"
[value]="progress">
</mat-progress-bar>
<!--passwordStatusBarColor could be 'weak', 'weakest', etc. with a corresponding rule-->
styles.scss:
样式.scss：
.weakest {
.mat-progress-bar-fill::after {
background-color: yellow;
}
}
回答by Luiz Rossi
For me I just need to put in CSS this rule:
对我来说，我只需要在 CSS 中加入这个规则：
div.mat-progress-bar-primary.mat-progress-bar-fill.mat-progress-bar-element::after{
background-color: green;
}
div.mat-progress-bar-primary.mat-progress-bar-fill.mat-progress-bar-element::after{
background-color: green;
}
But clearly is easier if you use a theme.
但如果您使用主题，显然会更容易。
回答by Srihari GouthamGr
Angular 7 and Material 7.1.1
Angular 7 和 Material 7.1.1
::ng-deep .mat-progress-spinner circle, .mat-spinner circle{
stroke: green !important;
}
回答by S Sarangi
You can add a custom class and add styles to the same in styles.scss (with !important).
您可以在styles.scss（使用！important）中添加自定义类并添加样式。
.your-custom-class{
background-color: colorname !important;
}
or you can use the existing class to override the defined css properties by adding them to your global styles.scss file.
或者您可以使用现有类通过将定义的 css 属性添加到您的全局 styles.scss 文件来覆盖它们。
.mat-progress-bar-fill::after{
background-color: colorname;
}
.mat-progress-bar-buffer {
background: colorname;
}
回答by Akshay Garg
You can override only progress bar backgroud-color through this method added custom class then apply css by combination of tag and class like-
您可以通过此方法添加的自定义类仅覆盖进度条背景颜色，然后通过标签和类的组合应用 css，例如 -
<mat-progress-bar class="my-color" mode="determinate" value="40"></mat-progress-bar>
<mat-progress-bar class="my-color" mode="determinate" value="40"></mat-progress-bar>
Change into style.css
改成style.css
mat-progress-bar.my-color .mat-progress-bar-fill::after {
background-color: green;
}
mat-progress-bar.my-color .mat-progress-bar-fill::after {
background-color: green;
}
