如何使 Angular Material Stepper 中的 CSS 變化？

Question

我在一個項目上與 Mat-Stepper 合作。 這是該項目的 stackblitz 鏈接。 我想在這里做兩個改變：-

1. 如何刪除步驟之間的水平線並將其替換為其他東西，如箭頭或其他東西？
2. 我想通過在 label 周圍添加陰影來突出顯示它。 那可能嗎？

在此先感謝您的幫助。

Answer 1

將此添加到您的 styles 並將背景更改為您喜歡的任何背景

.mat-stepper-horizontal-line{border-color: transparent; position: relative;}
.mat-stepper-horizontal-line:after{content: ""; position: absolute; left: 50%; top: 50%; width: 20px; height: 20px; background: red; margin: -10px 0 0 -10px;}

盒影

.mat-horizontal-stepper-header-container{box-shadow: inset 0 0 0 1px red;}