如何在 angular material 中避免多余的 mat-form-field-underline

Question

我在寻找为什么我在使用组件时得到额外的 mat-form-field-underline 时遇到问题。我的页面使用以下代码

    <mat-form-field class="col-md-6">
            <app-mat-select-all 
                [data]="tractList$"
                formControlName="tractList"
                fieldName="name"
                [multiselect]=true
                labelText="Tract List"
                idField="guid"
                >
            </app-mat-select-all>
    </mat-form-field>

And my custom component has the following template code

    <form novalidate [formGroup]="form">
        <mat-form-field>
        <mat-label>{{labelText}}</mat-label>
        <mat-select  #select [multiple]="multiselect" [formControl]="selectField" >
          <div class="select-all">
              <mat-checkbox *ngIf="multiselect" [(ngModel)]="allSelected"
                              [ngModelOptions]="{standalone: true}"
                              [indeterminate]="isIndeterminate()"
                              [checked]="isChecked()" 
                              (click)="$event.stopPropagation()"
                              (change)="toggleAllSelection($event)">{{text}}</mat-checkbox>
          </div>
          <mat-option *ngFor="let item of data" [value]="item[idField]">
            {{item[fieldName]}}
          </mat-option>
        </mat-select>
        </mat-form-field>
        </form>

在呈现的页面上看起来像这样

当我将以下行添加到我的 parent 样式 sheet 时，所有 mat-form-field-underline 都消失了，这不是我想要的。如果我去删除自定义组件中的 mat-form-field，我只会得到一行，但是 mat-form-field-underline 的对齐与页面上的其他组件关闭了。所以我需要找到一种方法只针对第二个下划线才能删除。

    ::ng-deep .mat-form-field-underline {
        display: none;
    }

这是一个 stackblitz 示例，它演示了第二个下划线的这个问题 StackBlitz Sample

这是我检查时的代码，由于某种原因，mat-form-field 中似乎有一个 mat-form-field。不知道为什么？

    <mat-form-field _ngcontent-jtb-c709="" class="mat-form-field col-md-6 ng-tns-c393-17 mat-primary mat-form-field-appearance-legacy mat-form-field-can-float mat-form-field-hide-placeholder"><div class="mat-form-field-wrapper ng-tns-c393-17"><div class="mat-form-field-flex ng-tns-c393-17"><!--bindings={
      "ng-reflect-ng-if": "false"
    }--><!--bindings={
      "ng-reflect-ng-if": "0"
    }--><div class="mat-form-field-infix ng-tns-c393-17"><app-mat-select-all _ngcontent-jtb-c709="" formcontrolname="tractList" fieldname="name" labeltext="Tract List" idfield="guid" _nghost-jtb-c804="" ng-reflect-field-name="name" ng-reflect-label-text="Tract List" ng-reflect-id-field="guid" ng-reflect-name="tractList" ng-reflect-form-control-name="tractList" class="ng-tns-c393-17 ng-untouched ng-pristine ng-valid" ng-reflect-multiselect="true" ng-reflect-data="[object Object],[object Object"><form _ngcontent-jtb-c804="" novalidate="" ng-reflect-form="[object Object]" class="ng-untouched ng-pristine ng-valid"><mat-form-field _ngcontent-jtb-c804="" class="mat-form-field ng-tns-c393-18 mat-primary mat-form-field-type-mat-select mat-form-field-appearance-legacy mat-form-field-can-float mat-form-field-has-label mat-form-field-hide-placeholder ng-untouched ng-pristine ng-valid"><div class="mat-form-field-wrapper ng-tns-c393-18"><div class="mat-form-field-flex ng-tns-c393-18"><!--bindings={
      "ng-reflect-ng-if": "false"
    }--><!--bindings={
      "ng-reflect-ng-if": "0"
    }--><div class="mat-form-field-infix ng-tns-c393-18"><mat-select _ngcontent-jtb-c804="" role="combobox" aria-autocomplete="none" aria-haspopup="true" class="mat-select ng-tns-c500-19 ng-tns-c393-18 ng-star-inserted mat-select-empty mat-select-multiple ng-untouched ng-pristine ng-valid" ng-reflect-multiple="true" ng-reflect-form="[object Object]" aria-labelledby="mat-form-field-label-19 mat-select-value-15" id="mat-select-14" tabindex="0" aria-expanded="false" aria-required="false" aria-disabled="false" aria-invalid="false"><div cdk-overlay-origin="" class="mat-select-trigger ng-tns-c500-19"><div class="mat-select-value ng-tns-c500-19" ng-reflect-ng-switch="true" id="mat-select-value-15"><span class="mat-select-placeholder mat-select-min-line ng-tns-c500-19 ng-star-inserted"></span><!--bindings={
      "ng-reflect-ng-switch-case": "true"
    }--><!--bindings={
      "ng-reflect-ng-switch-case": "false"
    }--></div><div class="mat-select-arrow-wrapper ng-tns-c500-19"><div class="mat-select-arrow ng-tns-c500-19"></div></div></div><!--bindings={
      "ng-reflect-offset-y": "0"
    }--></mat-select><span class="mat-form-field-label-wrapper ng-tns-c393-18"><label class="mat-form-field-label ng-tns-c393-18 mat-empty mat-form-field-empty ng-star-inserted" ng-reflect-disabled="true" id="mat-form-field-label-19" ng-reflect-ng-switch="true" for="mat-select-14" aria-owns="mat-select-14"><!--bindings={
      "ng-reflect-ng-switch-case": "false"
    }--><mat-label _ngcontent-jtb-c804="" class="ng-tns-c393-18 ng-star-inserted">Tract List</mat-label><!--bindings={
      "ng-reflect-ng-switch-case": "true"
    }--><!--bindings={
      "ng-reflect-ng-if": "false"
    }--></label><!--bindings={
      "ng-reflect-ng-if": "true"
    }--></span></div><!--bindings={
      "ng-reflect-ng-if": "0"
    }--></div><div class="mat-form-field-underline ng-tns-c393-18 ng-star-inserted"><span class="mat-form-field-ripple ng-tns-c393-18"></span></div><!--bindings={
      "ng-reflect-ng-if": "true"
    }--><div class="mat-form-field-subscript-wrapper ng-tns-c393-18" ng-reflect-ng-switch="hint"><!--bindings={
      "ng-reflect-ng-switch-case": "error"
    }--><div class="mat-form-field-hint-wrapper ng-tns-c393-18 ng-trigger ng-trigger-transitionMessages ng-star-inserted" style="opacity: 1; transform: translateY(0%);"><!--bindings={
      "ng-reflect-ng-if": ""
    }--><div class="mat-form-field-hint-spacer ng-tns-c393-18"></div></div><!--bindings={
      "ng-reflect-ng-switch-case": "hint"
    }--></div></div></mat-form-field></form></app-mat-select-all><span class="mat-form-field-label-wrapper ng-tns-c393-17"><!--bindings={
      "ng-reflect-ng-if": "false"
    }--></span></div><!--bindings={
      "ng-reflect-ng-if": "0"
    }--></div><div class="mat-form-field-underline ng-tns-c393-17 ng-star-inserted"><span class="mat-form-field-ripple ng-tns-c393-17"></span></div><!--bindings={
      "ng-reflect-ng-if": "true"
    }--><div class="mat-form-field-subscript-wrapper ng-tns-c393-17" ng-reflect-ng-switch="hint"><!--bindings={
      "ng-reflect-ng-switch-case": "error"
    }--><div class="mat-form-field-hint-wrapper ng-tns-c393-17 ng-trigger ng-trigger-transitionMessages ng-star-inserted" style="opacity: 1; transform: translateY(0%);"><!--bindings={
      "ng-reflect-ng-if": ""
    }--><div class="mat-form-field-hint-spacer ng-tns-c393-17"></div></div><!--bindings={
      "ng-reflect-ng-switch-case": "hint"
    }--></div></div></mat-form-field>

Answer 1

当你这样做时：

::ng-deep .mat-form-field-underline {
  display: none;
}

这将适用于具有此 class 的所有 Material 个组件。您应该做的是将自定义 class 添加到 HTML 中的组件，然后在 SCSS 文件中像这样引用它：

<mat-form-field class="custom-class">
  ...
</mat-form-field>

::ng-deep .custom-class .mat-form-field-underline {
  display: none;
}

现在，只有该组件会受到 ::ng-deep 覆盖的影响。

Working example

如何在 angular material 中避免多余的 mat-form-field-underline

How to avoid extra mat-form-field-underline in angular material

javascript

css

typescript

angular-material

angular