From 6cf4e0dd846b708099d36574e011b85a05bf6c0a Mon Sep 17 00:00:00 2001 From: Kristiyan Kostadinov Date: Thu, 20 May 2021 07:33:16 +0200 Subject: [PATCH] fix(material-experimental/mdc-button): density styles being overwritten by structural styles 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. --- src/material-experimental/mdc-button/_button-theme.scss | 7 +++++-- .../mdc-button/_icon-button-theme.scss | 3 ++- 2 files changed, 7 insertions(+), 3 deletions(-) diff --git a/src/material-experimental/mdc-button/_button-theme.scss b/src/material-experimental/mdc-button/_button-theme.scss index 4f0df23e0872..dda3ca5a243c 100644 --- a/src/material-experimental/mdc-button/_button-theme.scss +++ b/src/material-experimental/mdc-button/_button-theme.scss @@ -158,8 +158,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); + } } } diff --git a/src/material-experimental/mdc-button/_icon-button-theme.scss b/src/material-experimental/mdc-button/_icon-button-theme.scss index 16196ca888db..5accde93ff62 100644 --- a/src/material-experimental/mdc-button/_icon-button-theme.scss +++ b/src/material-experimental/mdc-button/_icon-button-theme.scss @@ -56,7 +56,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); }