角度材料步进更改图标颜色

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了角度材料步进更改图标颜色相关的知识,希望对你有一定的参考价值。

我使用角度6和角度材料。我正在使用角度材料的垫步进器。想要更改默认,活动和已访问步骤的mat-icon颜色。有人可以帮忙吗?

:host /deep/ mat-horizontal-stepper .mat-horizontal-stepper-header-container .mat-step-icon {
    background-color: "red" !important;
    color: #fff !important;
}

.mat-step-icon-selected,
.mat-step-icon-state-done,
.mat-step-icon-state-edit {
  background-color: "blue";
  color:#fff;
}  

也试过这个:

/deep/ mat-step-header.mat-horizontal-stepper-header > div.mat-step-icon-selected {
    background-color:'red';
}

但不行

谢谢

答案

我能够在项目根目录的styles.css文件中使用以下样式将颜色更改为红色,而不是组件的样式表

.mat-step-header .mat-step-icon-selected, .mat-step-header .mat-step-icon-state-done, 
.mat-step-header .mat-step-icon-state-edit {
    background-color: red !important;
    color: red !important;
}

要隐藏每个步骤中的数字,只需在ng-star-inserted类的样式中使用display none

.ng-star-inserted {display: none}

以上是关于角度材料步进更改图标颜色的主要内容,如果未能解决你的问题,请参考以下文章

角材料步进器删除数字

如何制作单独的角度材料步进标题和内容?

如何更改角度组件的活动材料列表材料列表项颜色?

如何更改 onRowAdd、onRowUpdate、onRowDelete 的材料表图标的颜色?

如何更改材料设计导航抽屉中汉堡图标的颜色

如何更改角度材料中选定选项卡的下划线颜色?