我現在努力了幾個小時。我使用Material2，只是想改變進度條的顏色。我知道有這些主題(主要/強調/警告)，但我想有一個自定義顏色(綠色)為我的進度條。
我已經嘗試了最奇怪的css組合..但是毫不費力。也許有人有同樣的問題？
你可以使用::ng-deep選擇器來實現你想要的，這個答案有一些信息。
我是如何做到的:
半鑄鋼?鋼性鑄鐵(Cast Semi-Steel)
::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;
}超文本標記語言
<mat-progress-bar mode="determinate" value="{{progress}}"></mat-progress-bar>結果是這樣的:
編輯:
我找到了避免使用::ng-deep的方法，因為它很快就會從angular中移除。 似乎如果你把你的樣式從你的component.css文件移動到全局styles.css文件，它不需要::ng-deep也能工作。
因此，上面定義的樣式可以在
mat-progress-bar .mat-progress-bar-buffer {
background: #E4E8EB;
}將它移動到styles.css，它將像這樣應用:
稍后編輯
解釋一下為什么在全局樣式表中設置樣式是有效的:
對于組件，默認情況下，角度為每個組件添加一個屬性 元素，然后將相同的屬性添加到每個 在css中為同一組件初始化。將樣式添加到全局 樣式表不添加這些屬性，因此樣式將是 已應用。 (為此感謝Jompis)
這在我的一個新項目中發揮了作用。我沒有特別檢查舊代碼，但條件是一樣的，沒有理由不工作。
更新: 在決定禁用CSS模塊時要小心謹慎，確保您完全理解所涉及的潛在風險。雖然對自己的理解有信心很重要，但要避免局限于教條式的真理。永遠努力抓住你正在徹底解決的問題。
因為到目前為止還沒有人提到...
我就是靠他解決的。
@遇見戴夫關于他的方法是正確的。但是你應該使用封裝:ViewEncapsulation。無(禁用css模塊)
大概是這樣的:
成分
@Component({
selector: '...',
templateUrl: '...',
styleUrls: ['...'],
encapsulation: ViewEncapsulation.None,
})薩斯(對我來說)
.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;
}
}視角
<mat-progress-bar
class="audio-progress-bar"
mode="buffer"
></mat-progress-bar>更新:
避免使用深、 TL；DR: Deep在技術上是無效的(比如，deeprecated :p)
有關更多信息，請參考:使用/deep/和& gt& gt& gt角度2
現在，要改變進度條的顏色， 這是我如何讓它工作的，
轉到styles.scss文件(或項目中的主css/scss文件)
添加此類->
.green-progress .mat-progress-bar-fill::after {
background-color: green !important;
}你的mat-progress應該使用上面的類，比如->
<mat-progress-bar class="green-progress" mode="indeterminate"></mat-progress-bar>角度8解決方案:
對我來說，這讓我的造型達到了最高水平。scss文件。也不得不選擇進去。SCS如下:
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:
.weakest {
.mat-progress-bar-fill::after {
background-color: yellow;
}
}我可以建議將一種預制的原色/警告色/強調色改為您的自定義顏色。
在您的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對我來說，我只需要在CSS中加入這條規則:
div . mat-progress-bar-primary . mat-progress-bar-fill . mat-progress-bar-element::after { 背景色:綠色； }
但是如果你使用一個主題，顯然會更容易。
您可以添加一個自定義類，并在styles.scss(使用！重要)。
.your-custom-class{
background-color: colorname !important;
}或者，您可以使用現有的類，通過將它們添加到您的全局styles.scss文件中來覆蓋已定義的css屬性。
.mat-progress-bar-fill::after{
background-color: colorname;
}
.mat-progress-bar-buffer {
background: colorname;
}更改組件類型Decorator中的配置:
封裝:視圖封裝。沒有人
然后...
.mat-progress-bar-fill::after {
background-color: $color;
}對我來說，上面的解決方案都不適合我。(使用角形材料14和角形材料15.1)
首先，為了找到問題，我必須使用DevTools瀏覽器調試器檢查元素。
下面是改變填充欄顏色的代碼(實際上是邊框...) :
.mdc-linear-progress__bar-inner {
border-color: red !important;
}這段代碼必須放在根樣式表(style.css)中。
關于mat-progress-bar-buffer，只需使用以下代碼(放入style.css文件中) :
mat-progress-bar {
:first-child {
background-color: gray;
}
}角度7和材料7.1.1
::ng-deep .mat-progress-spinner circle, .mat-spinner circle{
stroke: green !important;
}如果不使用::ng-deep、ViewEncapsulation或theming，我們可以只使用干凈的scss來定制進度條，方法是將下面的代碼放在style.scss中:
.mat-progress-bar {
.mat-progress-bar-fill::after{
background: #007bff;
}
.mat-progress-bar-buffer{
background: white;
}
}
.mat-progress-bar[mode=indeterminate] {
.mat-progress-bar-fill::after{
animation-duration: 1000ms !important;
}
animation-duration: 1000ms !important;
.mat-progress-bar-primary{
.mat-progress-bar-fill::after{
animation-duration: 1000ms !important;
}
animation-duration: 1000ms !important;
}
.mat-progress-bar-secondary {
.mat-progress-bar-fill::after{
animation-duration: 1000ms !important;
}
animation-duration: 1000ms !important;
}
}在style.scss中使用上面的樣式模式，我幾乎可以定制進度條的任何方面。我們可以根據正在使用的進度條的類型來調整模式。
在您的html中:
<mat-progress-bar class="my-progress-bar" mode="indeterminate"></mat-progress-bar>在你的全局風格中(在。樣式屬性下的angular-cli.json:
//This one is the moving color
.my-progress-bar .mat-progress-bar-fill::after {
background-color: #e91b22;
}
// This will become the background color of your bar
.my-progress-bar .mat-progress-bar-buffer {
background: white;
}即使你包含了任何材質主題，上面的配置也會覆蓋它
你可以只覆蓋進度條的背景色，通過這個方法添加自定義類，然后通過標簽和類的組合應用css，如-
& ltmat-progress-bar class = " my-color " mode = " determinal " value = " 40 " >& lt/mat-progress-bar & gt；
更改為style.css
mat-進度條. my-color。mat-progress-bar-fill::after { 背景色:綠色； }