From 938723466e1f5faf05d8014484f8e736dbd2f54d Mon Sep 17 00:00:00 2001 From: Miles Malerba Date: Fri, 11 Jun 2021 06:49:37 -0700 Subject: [PATCH 1/2] fix(material-experimental/mdc-snack-bar): increase the specificity of styles targeting the action buttons. Currently the order of the button theme vs the snackbar theme matters, this will make the snackbar theme always take precedence --- src/material-experimental/mdc-snack-bar/_snack-bar-theme.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/material-experimental/mdc-snack-bar/_snack-bar-theme.scss b/src/material-experimental/mdc-snack-bar/_snack-bar-theme.scss index 4967ae3c0f21..dca1b7cf9cd9 100644 --- a/src/material-experimental/mdc-snack-bar/_snack-bar-theme.scss +++ b/src/material-experimental/mdc-snack-bar/_snack-bar-theme.scss @@ -36,7 +36,7 @@ mdc-snackbar.$dismiss-ink-color: $orig-dismiss-ink-color; // The extra level of nesting here is to increase the specificity. - .mat-mdc-simple-snack-bar .mat-mdc-snack-bar-actions .mdc-snackbar__action { + .mat-mdc-simple-snack-bar .mat-mdc-snack-bar-actions .mdc-snackbar__action.mdc-snackbar__action { $is-dark-theme: map.get($config, is-dark); $accent: map.get($config, accent); color: if($is-dark-theme, inherit, theming.get-color-from-palette($accent, text)); From efe8666d98553e6cfaffc12eeccbb14b7fb58027 Mon Sep 17 00:00:00 2001 From: Miles Malerba Date: Fri, 11 Jun 2021 08:34:11 -0700 Subject: [PATCH 2/2] fix(material-experimental/mdc-snack-bar): increase the specificity of styles targeting the action buttons. --- src/material-experimental/mdc-snack-bar/_snack-bar-theme.scss | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/material-experimental/mdc-snack-bar/_snack-bar-theme.scss b/src/material-experimental/mdc-snack-bar/_snack-bar-theme.scss index dca1b7cf9cd9..85e45edda21e 100644 --- a/src/material-experimental/mdc-snack-bar/_snack-bar-theme.scss +++ b/src/material-experimental/mdc-snack-bar/_snack-bar-theme.scss @@ -35,7 +35,9 @@ mdc-snackbar.$label-ink-color: $orig-label-ink-color; mdc-snackbar.$dismiss-ink-color: $orig-dismiss-ink-color; - // The extra level of nesting here is to increase the specificity. + // Four classes is necessary to make it higher specificity than the mdc-button theme styles. + // This ensures the correct styles will be applied regardless of the order te mixins are + // @included. .mat-mdc-simple-snack-bar .mat-mdc-snack-bar-actions .mdc-snackbar__action.mdc-snackbar__action { $is-dark-theme: map.get($config, is-dark); $accent: map.get($config, accent);