如何自定义 angular material 输入 / select 下划线到方框

Question

如何将 angular material input/select 下划线更改为框（bootstrap 输入）

    .mat-form-field {
        border-radius : 4px;  
    }

    <mat-form-field>
      <mat-label>Favorite food</mat-label>
      <mat-select>
        <mat-option *ngFor="let food of foods" [value]="food.value">
          {{food.viewValue}}
        </mat-option>
      </mat-select>
    </mat-form-field>

Answer 1

mat-form-field 有 4 种类型的外观最接近你想要的是 outline 所以你的代码必须是

   <mat-form-field  appearance="outline">
      <mat-label>Favorite food</mat-label>
      <mat-select>
        <mat-option *ngFor="let food of foods" [value]="food.value">
          {{food.viewValue}}
        </mat-option>
      </mat-select>
    </mat-form-field>

如何自定义 angular material 输入 / select 下划线到方框

How to customize angular material input / select underline to box

angular

angular7