Angular Material: Styling mat-form-field inside mat-toolbar

Question

I'm trying to create a toolbar using Material's mat-toolbar with an input and select inside of it. For both, I am using Material's provided components ( mat-input and mat-select respectively) inside of mat-form-field s as advised. My code looks like this:

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

At the moment, the input and select are too tall to completely fit in the toolbar. I am trying to style them to make them fit (by reducing height , padding , margin , etc.). However, Angular adds elements between mat-form-field and the contained elements. I am unable to style those elements from the component's Sass because of view encapsulation. So, even if I style everything immediately present in my template, the generated elements have heights, margins, and paddings that force the observed element to be outside of the toolbar.

I don't want to include a global style for those components because I don't want other mat-form-field s to get affected.

Turning off view encapsulation would essentially be the same thing as using global styling.

::ng-deep is deprecated so I can't use that.

I could style my own input and select from scratch, but then I lose out on the prebuilt styling that Material provides. Is there any way that I can style these Material components to fit in my toolbar?

Answer 1

I had similiar problem and I have solved it with wrapping component with a div and then style it in global stylesheet with this

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

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

In your case, you could add class (or id) to the toolbar or wrap the form field with a div and in order to encapsulate the rules you want.

Answer 2

I added the following rules in my global stylesheet to make the mat-form-field fit:

[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

You can set the encapsulation: ViewEncapsulation.None, in the @Component decorator.

This will free the component from the restrains about styling. Keep in mind if you are using global styles you have to take care of the proper styling I will suggest using BEM for naming the CSS styles and not using generic naming.

More info - https://angular.io/api/core/ViewEncapsulation

Answer 4

You can add subscriptSizing="dynamic" to mat-form-field. This will not reserve spacing for the subscript below the mat-form-field.