after migrating to MDC all of the styling is off and i couldn't figure out how to fix it especially the inputs for example the number spinner on a number input is half the size of the input and i do not know how to fix that

i tried adding the mdc prefix to all CSS classes that needs that change but that didn't fix anything

HTML code:

<div class="container-fluid">
          <div class="row justify-content-end">
            <div class="col-auto">
              <mat-form-field appearance="outline">
                <mat-label>Date prochain calcul :</mat-label>
                <input
                  matInput
                  [matDatepicker]="pickerProchainCalcul"
                  formControlName="dateprochaincalcul"
                />
                <mat-datepicker-toggle
                  matIconSuffix
                  [for]="pickerProchainCalcul"
                ></mat-datepicker-toggle>
                <mat-datepicker #pickerProchainCalcul></mat-datepicker>
              </mat-form-field>
            </div>
          </div>
        </div>
      </div>

CSS code:

:host ::ng-deep .mat-form-field-infix {
  display: inline-flex !important;
}
:host ::ng-deep .mat-card-title {
  position: absolute;
  top: -25px;
  background: white;
  padding: 0 15px;
}
.label-information {
  color: grey;
}
.information {
  padding: 0 10px;
  font-size: 14px;
}
:host .dates-container ::ng-deep .mat-form-field-infix .mat-form-field {
  font-size: 12px;
  padding: 0 0 8px;
  width: 80%;
}
::ng-deep .mat-mdc-form-field-infix{
}
.tree-card {
  height: 270px;
  overflow-y: auto;
}
.loader-icon {
  height: 400px;
  display: flex;
  justify-content: center;
  align-items: center;
  span {
    font-size: 40px;
  }
}
/* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
/* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
/* 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-appearance-outline .mat-form-field-infix {
  padding: 0.5em 0 0.5em 0;
}

Styles.scss file:

// Custom Theming for Angular Material
// For more information: 
@use "@angular/material" as mat;

// Include core styles for Angular Material.
// Note: The legacy typography mixin has been removed in v19.
// If you need default typography hierarchy styles, include the following line:

// Include the core styles (without typography defaults)

// Define the palettes for your theme.
$remise-fresenius-primary: mat.m2-define-palette(mat.$m2-indigo-palette);
$remise-fresenius-accent: mat.m2-define-palette(mat.$m2-indigo-palette, A200, A100, A400);
$remise-fresenius-warn: mat.m2-define-palette(mat.$m2-red-palette);

// Create the theme object.
$remise-fresenius-theme: mat.m2-define-light-theme((
  color: (
    primary: $remise-fresenius-primary,
    accent: $remise-fresenius-accent,
    warn: $remise-fresenius-warn,
  ),

));
@include mat.core();
// Include theme styles for core and each component used in your app.
@include mat.all-component-themes($remise-fresenius-theme);

after migrating to MDC all of the styling is off and i couldn't figure out how to fix it especially the inputs for example the number spinner on a number input is half the size of the input and i do not know how to fix that

i tried adding the mdc prefix to all CSS classes that needs that change but that didn't fix anything

HTML code:

<div class="container-fluid">
          <div class="row justify-content-end">
            <div class="col-auto">
              <mat-form-field appearance="outline">
                <mat-label>Date prochain calcul :</mat-label>
                <input
                  matInput
                  [matDatepicker]="pickerProchainCalcul"
                  formControlName="dateprochaincalcul"
                />
                <mat-datepicker-toggle
                  matIconSuffix
                  [for]="pickerProchainCalcul"
                ></mat-datepicker-toggle>
                <mat-datepicker #pickerProchainCalcul></mat-datepicker>
              </mat-form-field>
            </div>
          </div>
        </div>
      </div>

CSS code:

:host ::ng-deep .mat-form-field-infix {
  display: inline-flex !important;
}
:host ::ng-deep .mat-card-title {
  position: absolute;
  top: -25px;
  background: white;
  padding: 0 15px;
}
.label-information {
  color: grey;
}
.information {
  padding: 0 10px;
  font-size: 14px;
}
:host .dates-container ::ng-deep .mat-form-field-infix .mat-form-field {
  font-size: 12px;
  padding: 0 0 8px;
  width: 80%;
}
::ng-deep .mat-mdc-form-field-infix{
}
.tree-card {
  height: 270px;
  overflow-y: auto;
}
.loader-icon {
  height: 400px;
  display: flex;
  justify-content: center;
  align-items: center;
  span {
    font-size: 40px;
  }
}
/* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
/* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
/* 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-appearance-outline .mat-form-field-infix {
  padding: 0.5em 0 0.5em 0;
}

Styles.scss file:

// Custom Theming for Angular Material
// For more information: https://material.angular.io/guide/theming
@use "@angular/material" as mat;

// Include core styles for Angular Material.
// Note: The legacy typography mixin has been removed in v19.
// If you need default typography hierarchy styles, include the following line:

// Include the core styles (without typography defaults)

// Define the palettes for your theme.
$remise-fresenius-primary: mat.m2-define-palette(mat.$m2-indigo-palette);
$remise-fresenius-accent: mat.m2-define-palette(mat.$m2-indigo-palette, A200, A100, A400);
$remise-fresenius-warn: mat.m2-define-palette(mat.$m2-red-palette);

// Create the theme object.
$remise-fresenius-theme: mat.m2-define-light-theme((
  color: (
    primary: $remise-fresenius-primary,
    accent: $remise-fresenius-accent,
    warn: $remise-fresenius-warn,
  ),

));
@include mat.core();
// Include theme styles for core and each component used in your app.
@include mat.all-component-themes($remise-fresenius-theme);

• css
• angular
• sass
• angular-material

1 Answer 1

this was fixed by applying this in styles.scss:

.mdc-notched-outline__notch {
  border-right: none;
}

the problem was because of the outline appearence i do not know if there is a permanent and more effecient fix for it (https://github/angular/components/issues/26102)