Mat stepper done 图标不在圆圈内

Question

你好，我在 angular..

中使用 mat stepper 时遇到问题

<div class="container text-center mt-5" >
  <p>E-SNEAKERS</p>
  <mat-horizontal-stepper #stepper>

    <mat-step label="Step 1">
      Step 1 content
    </mat-step>

    <mat-step label="Step 2">
      Step 2 content
    </mat-step>

    <mat-step label="Step 3">
      You are now done.
    </mat-step>

  </mat-horizontal-stepper>
</div>

完成步骤图标超出了圆圈.. 组件不包含任何 css..

image

Answer 1

检查此代码是否有效：

   <mat-step label="Step 1">
      <div style="padding-top: 3%;">
          Step 1 content
      </div>
    </mat-step>

    <mat-step label="Step 2">
      <div style="padding-top: 3%;">
          Step 2 content
      </div>
    </mat-step>

    <mat-step label="Step 3">
      <div style="padding-top: 3%;">
          You are now done.
      </div>
    </mat-step>

虽然 Designing/Templating 你需要考虑这些：

注意 1：在转换基于 Mat 的样式时 - 始终在 Local/Component 级别 scss 中更改，

注 2：如果您想在全局级别进行转换，请使用 ng-deep。更多信息将在以下位置提供：https://angular.io/guide/component-styles

Mat stepper done 图标不在圆圈内

Mat stepper done icon is out of circle

mat

angular

stepper