angular - 为 Angular Material 步进器中的一步分配全宽

Question

对于我的项目，我正在使用 Angular Material Stepper 组件，正如文档中所建议的那样

但是当我运行步进器时，文本区域的实际宽度（第一步）对于我的任务（红色矩形）来说太小了。是否可以将步进器中的步进宽度扩展到最大尺寸（绿色矩形）。

第一步文本区域的标记如下所示：

<mat-step [stepControl]="firstFormGroup">
  <form [formGroup]="firstFormGroup">
    <ng-template matStepLabel>Raw text</ng-template>
    <mat-form-field appearance="outline">
      <mat-label>Input raw text here</mat-label>
      <textarea
        matInput
        rows="15"
        placeholder="Raw text"
        required
        [(ngModel)]="sourceText"
      ></textarea>
    </mat-form-field>
    <div>
      <button mat-button matStepperNext>Next</button>
    </div>
  </form>
</mat-step>

我已经尝试使用这里建议的 css 代码：

::ng-deep .mat-horizontal-stepper-content[aria-expanded="false"] {
  width: 0px !important;
}

但是没有效果。

简历：有没有办法将红色方块（如上图所示）中的文本区域扩展到绿色方块的宽度？

标签： angular

Answer 1

 <mat-form-field appearance="outline" class='w100'>
      <mat-label>Input raw text here</mat-label>
      <textarea
        matInput
        rows="15"
        placeholder="Raw text"
        required
        [(ngModel)]="sourceText"
      ></textarea>
    </mat-form-field>

在 CSS 中

.w100{
width : 100%;

}