fix(material-experimental/mdc-chips): make it easier to customize chi…

…p typography (#24632)

Moves the typography styles of the chip to the root of the component so that it's easier to customize, similar to the non-MDC version.

src/material-experimental/mdc-chips/_chips-theme.scss

@@ -1,8 +1,8 @@
-@use '@material/chips/chip' as mdc-chip;
 @use '@material/chips/chip-theme' as mdc-chip-theme;
 @use '@material/chips/chip-set' as mdc-chip-set;
 @use '@material/theme/theme-color' as mdc-theme-color;
 @use '@material/theme/color-palette' as mdc-color-palette;
+@use '@material/typography' as mdc-typography;
 @use 'sass:color';
 @use 'sass:map';
 @use '../mdc-helpers/mdc-helpers';
@@ -80,7 +80,12 @@
       theming.get-typography-config($config-or-theme));
   @include mdc-chip-set.core-styles($query: mdc-helpers.$mat-typography-styles-query);
   @include mdc-helpers.mat-using-mdc-typography($config) {
-    @include mdc-chip.without-ripple-styles($query: mdc-helpers.$mat-typography-styles-query);
+    // Note that we don't go through MDC's typography mixin, because it assigns the styles to
+    // an inner element which makes it difficult for clients to customize. Instead we apply the
+    // same styles ourselves to the root.
+    .mat-mdc-standard-chip {
+      @include mdc-typography.typography(body2, $query: mdc-helpers.$mat-typography-styles-query);
+    }
   }
 }
 

src/material-experimental/mdc-chips/chip.scss

@@ -73,6 +73,14 @@
     width: 100%;
   }
 
+  // This element can be placed on a `button` node which usually has some user agent styles.
+  // Reset the font so that the typography from the root element can propagate down.
+  .mdc-evolution-chip__action--primary {
+    font: inherit;
+    letter-spacing: inherit;
+    white-space: inherit;
+  }
+
   // MDC sizes and positions this element using `width`, `height` and `padding`.
   // This usually works, but it's common for apps to add `box-sizing: border-box`
   // to all elements on the page which can cause the graphic to be clipped.