在组件上使用样式的解决方案（使用视图封装）

Question

我正在使用角度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';
}

但不起作用

谢谢

Answer 1

我可以在项目根目录而不是组件的样式表中的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类的样式

.ng-star-inserted {display: none}

Answer 2

在组件上使用样式的解决方案（使用视图封装）

与@mruanova大致相同，但使用视图封装，因此样式可以在组件上，例如 a-stepper.component.css：

/**
    Change color of stepper icon to green, when completed.
    - NOTE: requires 'encapsulation: ViewEncapsulation.None' in component definition
 */
.mat-step-header .mat-step-icon-state-done,
.mat-step-header .mat-step-icon-state-edit {
    background-color: green !important;
}

查看组件的封装：

@Component({
    selector: 'a-stepper',
    templateUrl: './a-stepper.component.html',
    styleUrls: ['./a-stepper.component.css'],
    providers: [{
        provide: STEPPER_GLOBAL_OPTIONS, useValue: {showError: true}
    }],
    encapsulation: ViewEncapsulation.None
})
export class AStepperComponent implements OnInit {

注意：我的css也略有不同，因为它会影响背景，因为我放置了绿色的勾号，而不是使用基色进行编辑。

Answer 3

我尝试使用@mruanova的答案，我很好，但是我只想在选中该步骤时将其设为红色。

如果仅在选择步骤时才想应用红色，请在父样式文件上使用以下CSS：

    .mat-step-icon-selected {
    background-color: red !important;
    color: red !important;
}

Answer 4

您可以直接在 HTML 中覆盖图标集。

<mat-horizontal-stepper>
    <!-- Icon overrides. -->
    <ng-template matStepperIcon="edit">
        <mat-icon>account_circle</mat-icon>
    </ng-template>
    <ng-template matStepperIcon="active">
        <mat-icon>account_circle</mat-icon>
    </ng-template>
    <ng-template matStepperIcon="done">
        <mat-icon>account_circle</mat-icon>
    </ng-template>
    <ng-template matStepperIcon="number">
        <mat-icon>account_circle</mat-icon>
    </ng-template>
</mat-horizontal-stepper>

它甚至适用于很棒的字体：

<mat-horizontal-stepper>
    <!-- Icon overrides. -->
    <ng-template matStepperIcon="edit">
        <i class="fa fa-check-circle"></i>
    </ng-template>
    <ng-template matStepperIcon="active">
        <i class="fa fa-dot-circle-o"></i>
    </ng-template>
    <ng-template matStepperIcon="done">
        <i class="fa fa-dot-circle-o"></i>
    </ng-template>
    <ng-template matStepperIcon="number">
        <i class="fa fa-dot-circle-o"></i>
    </ng-template>
</mat-horizontal-stepper>

如需更改颜色和其他自定义设置，请查看 https://stackoverflow.com/a/66428028/4184651

Answer 5

.mat-step-header .mat-step-icon-selected, .mat-step-header .mat-step-icon-state-done, .mat-step-header .mat-step-icon-state-编辑 { 背景色：#673ab7；颜色：#fff; }

角材质步进更改图标颜色

5 个答案:

在组件上使用样式的解决方案（使用视图封装）