JavaEar 专注于收集分享传播有价值的技术资料


  1. you can add this in your css

    ::ng-deep .mat-form-field-wrapper{
       margin-bottom: -1.25em;

    but as you add this you cannot put <mat-hint>hint</mat-hint> or <mat-error>error</mat-error> properly. Error and hint get inside the form-field when you remove padding;

    Without using ::ng-deep( for Angular 8 )

    Turn off encapsulation of your component inside which you change the padding.

    You can do this by

    import {Component,ViewEncapsulation} from '@angular/core';
      selector: 'example',
      templateUrl: 'example.component.html',
      styleUrls: ['example.component.css'],
      encapsulation : ViewEncapsulation.None,
    export class ExampleComponent {}

    Wrap the component you want to style in a custom class. So it wont affect any other mat-form-field components. Let's wrap this with with my-form-field class for now

    <mat-form-field class="my-form-field>
      <input matInput placeholder="Input">
    .my-form-field .mat-form-field-wrapper{
          margin-bottom: -1.25em;

    You can add these css in global stylesheet without turning off view encapsulation. But more elegant method is the above one

  2. 参考答案2
  3. 参考答案3
  4. I am able to remove bottom space of mat-form-filed by using following css in style.scss

        padding-bottom: 10px;
  5. 参考答案4
  6. .mat-form-field-infix{
        display: block;
        position: relative;
        flex: auto;
        padding: 0;
        border-top: 0px solid transparent !important;

    you can add important in css

  7. 参考答案5
  8. My solution was to use an additional class.


    <mat-form-field class="no-padding">
        <input type="number" matInput placeholder="Speed" [ngModel]="speed"
               (ngModelChange)="onSpeedChange('speed', $event)"/>


    .no-padding {
      .mat-form-field-wrapper {
        padding-bottom: 0 !important;

    The !important keyword is unfortunately necessary as it will otherwise just pull in the default instead.

  9. 参考答案6
  10. You can add height:4em to mat-form-field
                    <mat-label>Favorite food</mat-label>
                    <input matInput placeholder="Ex. Pizza" value="Sushi">