角材料密码强度扩展的大小

Question

此扩展名@ angular-material-extensions / password-strength的作用类似于diva。我将所有内容放入一个style="text-align:center;"的div中，这实际上是可行的。但是我还为每个组件的宽度设置了一个CSS类，但这并不适用。

如果我显示所有要求，那就是整个步进器的尺寸。该条形图并不能完全显示，因为我已经在那里使用过一些CSS，但这并不是真正的解决方案。

<mat-horizontal-stepper linear="true" #stepper>
      <mat-step [stepControl]="firstFormGroup">
        <form [formGroup]="registerForm" class="form" novalidate>
          <div style="text-align:center;">
            <ng-template matStepLabel>{{ 'REGISTRATION.STEPPER_LOGIN' | translate }}</ng-template>
            <mat-card-subtitle>
              <mat-slide-toggle [(ngModel)]="showDetails" [ngModelOptions]="{standalone: true}">
                {{ 'REGISTRATION.PASSWORDREQUIREMENTS' | translate }}</mat-slide-toggle>
            </mat-card-subtitle>

            <mat-form-field class="full-width" [color]="passwordComponent.color">
              <mat-pass-toggle-visibility #toggle matSuffix></mat-pass-toggle-visibility>
              <input matInput maxlength="25" [type]="toggle.type" required
                placeholder="{{ 'REGISTRATION.PASSWORD' | translate }}" #password formControlName="password"
                type="password" />
              <mat-hint style="color: red" *ngIf="capslockOn" align="start" aria-live="polite">
                <strong>{{ 'CAPSLOCK' | translate }}</strong>
              </mat-hint>
              <mat-hint align="end" aria-live="polite">
                {{password.value.length}} / 25
              </mat-hint>
              <mat-error *ngIf="formErrors.password" class="form__error">{{ formErrors.password }} </mat-error>
            </mat-form-field>
            <mat-password-strength class="full-width" #passwordComponent min="4" [password]="password.value">
            </mat-password-strength>

            <mat-password-strength-info class="full-width" *ngIf="showDetails" [passwordComponent]="passwordComponent">
            </mat-password-strength-info>
          </div>
        </form>
      </mat-step>

我使用的CSS类：

::ng-deep .mat-progress-bar {
  width: 27% !important;
}

.full-width {
  width: 80%;
}