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

Question

我正在使用角 6 和角材料。我正在使用角材料的垫子步进器。想要更改默认、活动和访问步骤的垫子图标颜色。任何人都可以帮忙吗？

: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';
}

但不工作

谢谢

Answer 1

我可以在项目根目录下的 style.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}