Angular Material：在 mat-toolbar 内设置 mat-form-field 样式

Question

我正在尝试使用带有输入的材质创建一个工具栏mat-toolbar，并在其中进行选择。对于两者，我按照建议在 s 内部使用 Material 提供的组件（mat-input和分别）。我的代码如下所示：mat-selectmat-form-field

<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>

目前，输入和选择太高，无法完全放入工具栏中。我正在尝试设计它们的样式以使其适合（通过减少height、padding、margin等）。然而，Angular 在元素之间mat-form-field和包含的元素之间添加元素。由于视图封装，我无法从组件的 Sass 中设置这些元素的样式。因此，即使我对模板中立即存在的所有内容进行样式设置，生成的元素也具有高度、边距和填充，这些高度、边距和填充会强制观察到的元素位于工具栏之外。

我不想为这些组件包含全局样式，因为我不希望其他mat-form-field组件受到影响。

关闭视图封装本质上与使用全局样式相同。

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

我可以从头开始设计自己的input样式select，但随后我就失去了 Material 提供的预构建样式。有没有什么方法可以设置这些材质组件的样式以适合我的工具栏？

Answer 1

您可以添加subscriptSizing="dynamic"到 mat-form-field。这不会为 mat-form-field 下面的下标保留间距。

Answer 2

我遇到了类似的问题，我已经用 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 包装表单字段，以便封装您想要的规则。