diff --git a/src/material-experimental/mdc-core/option/_option-theme.scss b/src/material-experimental/mdc-core/option/_option-theme.scss index 93ca9f354e73..a178ba4e16cd 100644 --- a/src/material-experimental/mdc-core/option/_option-theme.scss +++ b/src/material-experimental/mdc-core/option/_option-theme.scss @@ -55,9 +55,9 @@ theming.get-typography-config($config-or-theme)); @include mdc-helpers.mat-using-mdc-typography($config) { - // MDC uses the `subtitle1` level for list items, but the spec shows `body1` as the correct - // level. Class is repeated for increased specificity. - .mat-mdc-option .mdc-list-item__primary-text { + // MDC uses the `subtitle1` level for list items, but + // the spec shows `body1` as the correct level. + .mat-mdc-option { @include mdc-typography.typography(body1, $query: mdc-helpers.$mat-typography-styles-query); } } diff --git a/src/material-experimental/mdc-core/option/option.scss b/src/material-experimental/mdc-core/option/option.scss index cedca159fef5..3c7fe08a9478 100644 --- a/src/material-experimental/mdc-core/option/option.scss +++ b/src/material-experimental/mdc-core/option/option.scss @@ -66,10 +66,21 @@ pointer-events: none; } - // Needs to be overwritten explicitly, because the style can + // Needs to be overwritten explicitly, because the style can // leak in from the list and cause the text to truncate. .mdc-list-item__primary-text { white-space: normal; + + // MDC assigns the typography to this element, rather than the option itself, which will break + // existing overrides. Set all of the typography-related properties to `inherit` so that any + // styles set on the host can propagate down. + font-size: inherit; + font-weight: inherit; + letter-spacing: inherit; + line-height: inherit; + font-family: inherit; + text-decoration: inherit; + text-transform: inherit; } }