垫子步进完成图标不在圆圈内答案

【问题标题】：Mat stepper done icon is out of circle垫子步进完成图标不在圆圈内
【发布时间】：2020-11-28 10:58:15
【问题描述】：

您好，我在角度中使用 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

【问题讨论】：

你是否在每个垫子步进器后进行填充？像这样
Step 1 content

标签： angular mat stepper

【解决方案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>

在设计/模板时，您需要采取以下措施：

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

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

【讨论】：

你增加了 padding 或 margin 吗？你会创建一个 Stackblitz 演示吗？
我在全局 css mat-icon { transform: translate(0px, 0px)!important;用户选择：无； }，不过还是谢谢
现在可以工作了吗？在设计/模板时，您需要考虑这些注意 1：在转换基于 Mat 的样式时 - 始终在本地/组件级别的 scss 中更改，注意 2：如果您想在全局级别使用 ng-deep。更多信息将在：angular.io/guide/component-styles