What is causing the size increase in elements after upgrading Angular, and how can I fix it?

Question

I'm currently working on a project that needed to be upgraded to the latest angular version, after running the migration tool:

ng generate @angular/material:mdc-migration

All the elements look bigger, I have tried to resize them with the height property, but it is not working.

Before upgrading angular's version:

After upgrading angular's version:

Also, the button looks different, but I discovered that I just need to add the property letter-spacing: 0px !important in order to make them look better.

This is the HTML code:

<mat-toolbar>
    <form [formGroup]="form" (ngSubmit)="login()">
        <mat-form-field appearance="outline" class="login" floatLabel="never">
            <input matInput type="text" formControlName="userEmailAddress" id="email" placeholder="Username" autofocus
                   [ngClass]="{'is-invalid' : submitted && (form.controls.userEmailAddress.hasError('email') || form.controls.userEmailAddress.errors?.required)}" size="30"
                   i18n-placeholder="User email input text | The user email address for login into the application.@@emailInput" maxlength="130">
            <mat-error *ngIf="submitted && (form.controls.userEmailAddress.hasError('email') || form.controls.userEmailAddress.errors?.required)">
                <small *ngIf="form.controls.userEmailAddress.hasError('email')"
                       i18n="Invalid email error text | Invalid email input text error notification@@errorText">Please provide a valid username</small>
                <small *ngIf="form.controls.userEmailAddress.errors.required"
                       i18n="Required email error text | Required email input text error notification@@requiredEmailErrorText">Username is required</small>
            </mat-error>
        </mat-form-field>
        <br>
        <button id="login-btn" mat-flat-button color="primary"
                i18n="login button | The text in the login button of the application.@@loginButton">
            Login
        </button>
    </form>
</mat-toolbar>

The migration tool left these code lines as TODO:

/* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
::ng-deep.mat-mdc-form-field.mat-form-field-invalid .mat-form-field-label, small{
    color: rgba(black, 0.87);
}


/* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version.*/
::ng-deep.mat-form-field-ripple {
    background-color: map-get($primary-color,800) !important;
}


/* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
::ng-deep.mat-form-field-subscript-wrapper {
    margin-top: 0px !important;
}

/* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
::ng-deep.mat-form-field-infix {
    border-top: 16px solid transparent !important;
    padding: 0 0 10px 0 !important;
}

I have tried replacing the .mat-form-field classes to .mat-mdc-form-field, I also tried removing the ::ng-deep, but nothing seems to be working. I also tried to change the font-size of the .mat-form-field but it just resizes the font, leaving the whole .mat-form-field bigger:

Changing font-size:

Answer 1

I am facing the same issue too after upgrading to mdc components. Take a look at this blitz using component density. It will resize the field a little bit but won't get rid of the padding.

html

<div class="dense-1">
    <mat-form-field appearance="fill">
      <mat-label>Fill form field</mat-label>
      <input matInput placeholder="Placeholder" />
    </mat-form-field>
  </div>

  <div class="dense-2">
    <mat-form-field appearance="fill">
      <mat-label>Fill form field</mat-label>
      <input matInput placeholder="Placeholder" />
    </mat-form-field>
  </div>

ts

.dense-1 {
  @include mat.all-component-densities(-1);
}

.dense-2 {
  @include mat.all-component-densities(-2);
}