fix(material-experimental/mdc-button): density styles being overwritt…

…en by structural styles (#22736)

The button's density styles currently have the same specificity as the structural styles which means that they'll usually be overwritten, unless they're nested inside another selector.

These changes add more specificity so that the density always has precedence.

Fixes #22728.

(cherry picked from commit 3021cf5)

src/material-experimental/mdc-button/_button-theme.scss

@@ -196,8 +196,11 @@
   .mat-mdc-raised-button,
   .mat-mdc-unelevated-button,
   .mat-mdc-outlined-button {
-    @include mdc-button-theme.density($density-scale, $query: mdc-helpers.$mat-base-styles-query);
-    @include button-theme-private.touch-target-density($density-scale);
+    // Use `mat-mdc-button-base` to increase the specificity over the button's structural styles.
+    &.mat-mdc-button-base {
+      @include mdc-button-theme.density($density-scale, $query: mdc-helpers.$mat-base-styles-query);
+      @include button-theme-private.touch-target-density($density-scale);
+    }
   }
 }
 

src/material-experimental/mdc-button/_icon-button-theme.scss

@@ -49,7 +49,8 @@
 
 @mixin density($config-or-theme) {
   $density-scale: theming.get-density-config($config-or-theme);
-  .mat-mdc-icon-button {
+    // Use `mat-mdc-button-base` to increase the specificity over the button's structural styles.
+  .mat-mdc-icon-button.mat-mdc-button-base {
     @include mdc-icon-button.density($density-scale, $query: mdc-helpers.$mat-base-styles-query);
     @include button-theme-private.touch-target-density($density-scale);
   }