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

6个回答

    最佳答案
  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';
    @Component({
      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">
    </mat-form-field>
    
    .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

    .mat-form-field-wrapper{
        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.

    HTML:

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

    SCSS:

    .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-form-field
                  class="height-4em"
                  appearance="outline"
                  >
                    <mat-label>Favorite food</mat-label>
                    <input matInput placeholder="Ex. Pizza" value="Sushi">
                  </mat-form-field>