Angular 材質：mat-toolbar 內的樣式 mat-form-field

Question

我正在嘗試使用 Material 的mat-toolbar創建一個工具欄，其中包含一個輸入和 select。 對於兩者，我按照建議在mat-form-field中使用 Material 提供的組件（分別為mat-input和mat-select ）。 我的代碼如下所示：

<mat-toolbar>

    <mat-form-field appearance="outline">
      <mat-icon matPrefix>search</mat-icon>
      <input type="search" matInput placeholder="Search" />
    </mat-form-field>

    <mat-form-field appearance="outline">
      <mat-select [(value)]="omitted">
        <mat-option *ngFor="let omitted of omitted" [value]="omitted.slug">
          {{ omitted.name }}
        </mat-option>
      </mat-select>
    </mat-form-field>

  </mat-toolbar>

目前，input 和 select 太高，無法完全放入工具欄。 我正在嘗試設計它們以使其適合（通過減少height 、 padding 、 margin等）。 但是，Angular 在mat-form-field和包含的元素之間添加了元素。 由於視圖封裝，我無法從組件的 Sass 中設置這些元素的樣式。 因此，即使我對模板中立即出現的所有內容進行樣式設置，生成的元素也會具有高度、邊距和填充，從而迫使觀察到的元素位於工具欄之外。

我不想為這些組件包含全局樣式，因為我不希望其他mat-form-field受到影響。

關閉視圖封裝本質上與使用全局樣式相同。

::ng-deep已棄用，所以我不能使用它。

我可以從頭開始設置我自己的input和select的樣式，但隨后我失去了 Material 提供的預建樣式。 有什么方法可以設置這些 Material 組件的樣式以適合我的工具欄嗎？

Answer 1

我遇到了類似的問題，我已經用 div 包裝組件解決了它，然后用這個在全局樣式表中設置它的樣式

.filters {
    mat-form-field {
        div.mat-form-field-flex {
            align-items: flex-end;
        }

        div.mat-form-field-prefix {
            padding-right: 12px !important;
        }
    }
}

在您的情況下，您可以將類（或 id）添加到工具欄或用 div 包裝表單字段，以便封裝您想要的規則。

Answer 2

我在全局樣式表中添加了以下規則以使 mat-form-field 適合：

[the selector for the mat-form-field I wanted to affect]
    .mat-form-field-flex, .mat-form-field-label-wrapper
        padding-top: 0

    .mat-form-field-wrapper
        padding-bottom: 0

    .mat-form-field-underline
        bottom: 0

    .mat-form-field-infix
        border-top: 0

Answer 3

您可以在@Component 裝飾器中設置encapsulation: ViewEncapsulation.None, 。

這將使組件擺脫有關樣式的限制。 請記住，如果您使用全局樣式，則必須注意正確的樣式，我建議使用 BEM 來命名 CSS 樣式，而不是使用通用命名。

更多信息 - https://angular.io/api/core/ViewEncapsulation

Answer 4

您可以將subscriptSizing="dynamic"添加到 mat-form-field。 這不會為 mat-form-field 下面的下標保留間距。