如何自定义角材料形式字段

时间:2019-09-23 10:38:27

标签: angular8 angular-material-6

我尝试在我的角度项目中使用:: ng-deep自定义角度材料形式字段,我所面临的问题是仅在刷新页面或单击页面时才应用了css应用。

我尝试使用:: ng-deep并尝试在ts文件中设置Encapsulation.None。

<div class="input-row">
        <div class="call-out-grt">
          <div class="box">
              <mat-label class="arrival">GRT-NRT-DWT</mat-label>
              <div class="box-1">
              <mat-form-field class="cranes" appearance="outline">
                <input matInput type="text">
              </mat-form-field>
            </div>

            <div class="box-1">
              <mat-form-field class="cranes"  appearance="outline">
                <input matInput type="text">
              </mat-form-field>
            </div>
            <div class="box-1">
                <mat-form-field class="cranes"  appearance="outline">
                  <input matInput type="text">
                </mat-form-field>
              </div>

            </div>
          </div>
          <div class="call-out">
      <mat-form-field class="flag-field">
        <input matInput type="text" placeholder="Flag">
        </mat-form-field>
      </div>
      <div class="call-out-date">
          <mat-form-field class="flag-field">
              <input matInput type="text" placeholder="Built Date">
              </mat-form-field>

      </div>
    </div>

::ng-deep .cranes .mat-form-field-wrapper .mat-form-field-flex .mat-form-field-outline {
    width: 55px ;
    height: 50px;
    margin-left: 2px;
    }

css表单应在不刷新的情况下应用

0 个答案:

没有答案