From 7b85cc077c721fd3f14a34233691783ab488d2ac Mon Sep 17 00:00:00 2001 From: Kristiyan Kostadinov Date: Wed, 2 Mar 2022 23:18:27 +0100 Subject: [PATCH] fix(material-experimental/mdc-button): density styles being overwritten 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 3021cf5fb69cba4a502e7bacd8e0dca2eb99e2a6) --- 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 9c6f6f5fb4ad..7117ca4b92d3 100644 --- a/src/material-experimental/mdc-button/_button-theme.scss +++ b/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); + } } } diff --git a/src/material-experimental/mdc-button/_icon-button-theme.scss b/src/material-experimental/mdc-button/_icon-button-theme.scss index e69cb94f0dad..738dbc734ea7 100644 --- a/src/material-experimental/mdc-button/_icon-button-theme.scss +++ b/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); }