角材料步進器更改圖標顏色

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}

Answer 2

我曾嘗試使用@mruanova 的答案，我很棒，但我只想在選中該步驟時將其設為紅色。

如果您只想在選擇步驟時應用紅色，請在父樣式文件上使用以下 css：

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

Answer 3

組件樣式解決方案（使用視圖封裝）

與@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 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-edit { 背景-顏色：#673ab7； 顏色：#fff; }