我已经尝试了数个小时,使用Material2并想简单地更改进度条的颜色。我知道有主题(primary/accent/warn),但我想为我的进度条设置自定义颜色(绿色)。
我已经尝试过最奇怪的CSS组合...但没有效果。也许有人遇到过同样的问题?
我已经尝试了数个小时,使用Material2并想简单地更改进度条的颜色。我知道有主题(primary/accent/warn),但我想为我的进度条设置自定义颜色(绿色)。
我已经尝试过最奇怪的CSS组合...但没有效果。也许有人遇到过同样的问题?
您可以使用::ng-deep
选择器来实现您想要的效果,这个答案中提供了一些相关信息。
我的做法:
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
<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
,它将像这样应用:
后续编辑
解释一下为什么在全局样式表中设置样式可以起作用:
对于组件,默认情况下,Angular会向组件的每个DOM元素添加一个属性,然后将相同的属性添加到该组件的每个CSS类中。将样式添加到全局样式表不会添加这些属性,因此样式将被应用。 (感谢Jompis)
在我的新项目上,这对我起作用了。虽然我没有特别检查旧代码,但条件是相同的,没有理由不起作用。
更新: 在决定禁用 CSS 模块时要谨慎,确保您充分理解相关的潜在风险。虽然重要的是要对自己的理解有信心,但要避免被教条主义真理所限制。始终努力全面地理解您正在解决的问题。
由于迄今为止没有人提到......
这是我解决它的方法。
@Meet Dave 关于他的方法是正确的。但是,你应该使用 encapsulation: ViewEncapsulation.None
(禁用 CSS 模块)
像这样:
组件
@Component({
selector: '...',
templateUrl: '...',
styleUrls: ['...'],
encapsulation: ViewEncapsulation.None,
})
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;
}
}
视图
<mat-progress-bar
class="audio-progress-bar"
mode="buffer"
></mat-progress-bar>
ViewEncapsulation.None
这么做就像玩火。 - Dem Pilafian更新:
不要使用/deep/,简称TL;DR:/deep/在技术上是无效的(如同被淘汰了:p)
有关更多信息,请参见:Angular 2中使用/deep/和>>>的方法
现在,要更改mat-progress bar的颜色, 这是我让它工作的方法,
转到styles.scss文件(或项目中的主要CSS / SCSS文件)
添加此类-->
.green-progress .mat-progress-bar-fill::after {
background-color: green !important;
}
<mat-progress-bar class="green-progress" mode="indeterminate"></mat-progress-bar>
Angular 8 解决方案:
对我来说,解决方法是将我的样式放在顶层的一个 .scss
文件中。同时,也需要在.scss
中按照以下方式进行选择:
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;
}
}
对我来说,我只需要在CSS中加入这个规则:
div.mat-progress-bar-primary.mat-progress-bar-fill.mat-progress-bar-element::after{
background-color: green;
}
但是,如果您使用主题,则会更加简单。
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
angular-cli.json
中,在那里我覆盖了颜色 :)。非常感谢。 - Mka24更改组件类型装饰器中的配置:
encapsulation: ViewEncapsulation.None
然后...
.mat-progress-bar-fill::after {
background-color: $color;
}
.your-custom-class{
background-color: colorname !important;
}
.mat-progress-bar-fill::after{
background-color: colorname;
}
.mat-progress-bar-buffer {
background: colorname;
}
对我来说,以上的解决方案都没有起作用(使用Angular 14和Angular Materials 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;
}
}
不使用::ng-deep
、ViewEncapsulation
或主题,我们可以仅通过放置以下代码在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
中的样式模式,我能够自定义进度条的几乎任何方面。我们可以根据所使用的进度条类型调整模式。