Question

我正在尝试使用Material的mat-toolbar和输入来创建工具栏，然后在其中进行选择。对于这两者，我都按照建议在mat-input内部使用了Material提供的组件（分别为mat-select和mat-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提供的预建样式。有什么方法可以设置这些Material组件的样式以适合我的工具栏？

Answer 1

我遇到了类似的问题，我用div包装了组件，然后用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

角材料：在样式工具栏内设置样式字段

3 个答案: