CODEWITHSUNDEEP
angularangular-material
xRay
xRay

Reputation: 801

Angular Material v17: Missing "legacy" from "MatFormFieldAppearance"

In Angular Material v14, MatFormFieldAppearance provided the values legacy, standard, fill, and outline.

type MatFormFieldAppearance = 'legacy' | 'standard' | 'fill' | 'outline';

However, in Angular Material v17, it is only providing fill and outline.

type MatFormFieldAppearance = 'fill' | 'outline';

I am missing legacy and do not understand why they have removed it. So how can I make my input field look like this?

enter image description here

Upvotes: 1

Views: 1957

Answers (2)

Muhammad Bilal
Muhammad Bilal

Reputation: 1999

I also faced this issue when I upgraded angular material to v17. As we know in angular material v17, only fill and outline appearences are allowed but I still want to use legacy input style, I mean this: enter image description here

So here's a trick to show your appearence="fill" as legacy

Write this css in your global styling file

// ************************************************************************************************************************
// *** OVERRIDING THE STYLES OF OUR MAT-FORM-FIELDS TO MAKE IT LOOKS LIKE LEGACY INPUTS THAT WE HAD IN ANGULAR MATERIAL 14
// ************************************************************************************************************************

.mdc-text-field--filled, .mat-mdc-text-field-wrapper:hover, .mat-mdc-form-field-focus-overlay {
    background-color: transparent !important;
}

.mdc-text-field {
    padding: 0 !important;
}

.mdc-text-field {
    height: 50px !important;
}

.mat-mdc-form-field-hint-wrapper, .mat-mdc-form-field-error-wrapper {
    padding: 0 !important;
}

Before: enter image description here After: enter image description here

Upvotes: 0

Reza Saadati
Reza Saadati

Reputation: 5439

Use this CSS:

.mdc-text-field--filled, .mat-mdc-text-field-wrapper:hover, .mat-mdc-form-field-focus-overlay {
  background-color: transparent !important
}

I am pretty sure there is an official way to handle this issue. So although it is a hack, it may fix this issue temporarily.

Upvotes: 2

Related Questions