diff --git a/src/material-experimental/mdc-form-field/_mdc-form-field.scss b/src/material-experimental/mdc-form-field/_mdc-form-field.scss index 098679941010..10eda8722287 100644 --- a/src/material-experimental/mdc-form-field/_mdc-form-field.scss +++ b/src/material-experimental/mdc-form-field/_mdc-form-field.scss @@ -70,5 +70,9 @@ @include mdc-floating-label-core-styles($query: $mat-typography-styles-query); @include mdc-text-field-core-styles($query: $mat-typography-styles-query); @include _mat-form-field-subscript-typography($config); + + .mat-mdc-form-field { + @include mat-typography-level-to-styles($config, input); + } } } diff --git a/src/material-experimental/mdc-form-field/_mdc-text-field-structure-overrides.scss b/src/material-experimental/mdc-form-field/_mdc-text-field-structure-overrides.scss index bbb3b5e4819a..a523c1fd28d3 100644 --- a/src/material-experimental/mdc-form-field/_mdc-text-field-structure-overrides.scss +++ b/src/material-experimental/mdc-form-field/_mdc-text-field-structure-overrides.scss @@ -18,10 +18,10 @@ // Unset the border set by MDC. We move the border (which serves as the Material Design // text-field bottom line) into its own element. This is necessary because we want the - // bottom-line to span across the whole form-field (including prefixes and suffixes). - // Also we want to ensure that font styles are inherited for input elements. We want input - // text to align with surrounding text. Also font inheritance has been enabled in the non - // MDC-based implementation of the form-field too, so we need it for backwards compatibility. + // bottom-line to span across the whole form-field (including prefixes and suffixes). Also + // we ensure that font styles are inherited for input elements. We do this because inputs by + // default have explicit font styles from the user agent, and we set the desired font styles + // in the parent `mat-form-field` element (for better custom form-field control support). .mat-mdc-input-element { font: inherit; border: none;