Выделение полной ширины для одного шага в Angular Материальном степпере

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;
}

Но безрезультатно.

Резюме: есть ли способ расширить область текста в красном квадрате (показано на рисунке выше) до ширины зеленого квадрата?

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%;

}