Override style of first div of mat-form-field

Question

How can I override the CSS on the first div generated by the <mat-form-field>?

Background

I have a bunch of fields in an <mat-card> and the last field is causing too much padding at the bottom of the card.

<mat-form-field id="this-feels-hacky-and-wrong"...>
    <!-- I want to remove the padding-bottom from this element -->
    <div class="mat-input-wrapper mat-form-field-wrapper">
      ...
    </div>
</mat-form-field>

In my stlye.css I put

#this-feels-hacky-and-wrong div{
  padding-bottom: 0;
}

and that works but there must be a better/right way to do this, no?

I would prefer a solution that is in my component.scss file.

Answer 1

Try using this ::ng-deep

html

<mat-form-field class="this-feels-better"...>

component.scss

:host ::ng-deep .this-feels-better div.mat-input-wrapper.mat-form-field-wrapper{
  padding-bottom: 0;
}

Alternative

If you really don't want to use ng-deep because it'll be removed in the future, and you really want to have your css rule in your component.scss file, then you can change the component's view encapsulation to None

import {ViewEncapsulation} from '@angular/core';

@Component({
   //...
   encapsulation: ViewEncapsulation.None
})

However, in that case you need to make sure that you prefix all your CSS rules in that component with some kind of selector unique to the component, to prevent the rules leaking to other components.

.uniqueClassOnComponent .this-feels-better div.mat-input-wrapper.mat-form-field-wrapper{
   padding-bottom: 0;
}

//Other generic rules
.uniqueClassOnComponent span { ... }

Answer 2

Using ::ng-deep or /deep/ was not a solution for me, as it's being deprecated soon.

ViewEncapsulation.None wasn't a good solution for me either, because it tends to break several other component styles when used.

You can add a custom style (such as no-padding) to your global style sheet.

//example:
mat-form-field.no-padding .mat-form-field-wrapper {
    padding: 0;
}

Then apply it to your Material UI Form Fields as needed.

//example:
<mat-form-field class="no-padding">
    <mat-label>First Name</mat-label>
    <input matInput placeholder="First Name">
</mat-form-field>

Answer 3

With CSS you can use the n-th term. As long as the div you are trying to target has the same parent div as the others, you can reference the first and last child div like such:
.my-div-class:first-child {}
and
.my-div-class:last-child {}

So further this, the nth-term can then be used to target any child like this:
.my-div.class:nth-child(2) {}
This would target the second child.

For some further clarification to your question, this is what your CSS should look like:

mat-form-field:last-child div {
   padding-bottom: 0;
}

Answer 4

Update: See pistol-pete's answer above. It's the same, essentially.

For those coming in later, There's another way to do this. Do not use ng-deep, in its various forms, as it's deprecated. Breaking encapsulation is not recommended and goes against Angular's design practice. The solution is global CSS, but with a specific selector.

mat-form-field is part of Angular Material. It has its own encapsulation. Global styles, not component styles, can override this. However, you may not want to override all of these elements, maybe just one or two. I solved this by using a unique class to isolate the elements I wanted to change, then adding .mat-form-field-wrapper to target the element with the padding. Here's an example:

<mat-form-field class="pb-0">
  <mat-label>Not so hacky</mat-label>
  <imput matInput formControlName="notHacky" />
</mat-form-field>

Then with the pb-0 class, or whatever you want to call it, target in a global CSS space. In Angular, that's styles.css. With Sass, you'll likely have other global files you're importing into the styles file. Add this:

/* sass */
mat-form-field {
  &.pb-0 {
    .mat-form-field-wrapper {
      padding-bottom: 0;
    }
  }
}

/* plain css */
mat-form-field.pb-0 .mat-form-field-wrapper
 {
  padding-bottom: 0;
} 

You can repeat this for any component from any framework since global styles will be applied everywhere. I would recommend creating a unique file to hold all of these overrides.

Answer 5

Try this one.

HTML

<div style="width: 100%" class="time-period-area">
  <mat-form-field class="no-padding" appearance="outline">
    <mat-label>Time Period</mat-label>
    <input matInput style="height: 0; width: 100%" value=" " />
    <div class="mat-input-wrapper mat-form-field-wrapper">
      ...
    </div>
  </mat-form-field>
</div>

css

.time-period-area {
  mat-form-field.no-padding {
    width: 100%;
    padding: 0;
  }
}