Как установить разную ширину для разных форм в mat-Horizontal-Stepper

Question

Я хочу установить разную ширину для другой формы в mat-step. Содержимое в первой форме будет иметь ширину 400 пикселей, а содержимое второй формы будет иметь ширину 700 пикселей.

<mat-horizontal-stepper labelPosition="bottom" #stepper>
  <mat-step [stepControl]="firstFormGroup">
    <form [formGroup]="firstFormGroup">
      <ng-template matStepLabel>Fill out your name</ng-template>
       <div style="width:400px">
 <mat-form-field>
        <input matInput placeholder="Last name, First name" formControlName="firstCtrl" required>
      </mat-form-field>

       </div>

      <div>
        <button mat-button matStepperNext>Next</button>
      </div>
    </form>
  </mat-step>
  <mat-step [stepControl]="secondFormGroup">
    <form [formGroup]="secondFormGroup">
      <ng-template matStepLabel>Fill out your address</ng-template>
      <div style="width:700px">
         <mat-form-field>
        <input matInput placeholder="Address" formControlName="secondCtrl" required>
      </mat-form-field>
      </div>


      <div>
        <button mat-button matStepperPrevious>Back</button>
        <button mat-button matStepperNext>Next</button>
      </div>
    </form>
  </mat-step>
  <mat-step>
    <ng-template matStepLabel>Done</ng-template>
    You are now done.
    <div>
      <button mat-button matStepperPrevious>Back</button>
      <button mat-button (click)="stepper.reset()">Reset</button>
    </div>
  </mat-step>
</mat-horizontal-stepper>

Но это не работает, может кто-нибудь, пожалуйста, помогите мне, как этого добиться.

Answer 1

Поскольку меняется только видимость mat-step components, необходимо перезаписать ширину невидимых.

Используйте следующий код в файле CSS:

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

После этого вы можете использовать разные размеры ширины для каждого шага.