fix(material-experimental/mdc-core): make mat-option typography easie…

…r to override (#24247)

Related to internal b/215585751. Currently the typography styles for an option are set on `.mdc-list-item__primary-text` which is going to break existing overrides and may violate some linter checks. These changes restore the old behavior.

(cherry picked from commit 09013d5)

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);
     }
   }

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;
   }
 }