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

Issue

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?

Solution

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.

Answered By - Reza Saadati