bug(snack-bar): action button color not changeable

[dkimmich-onventis]

Is this a regression?

• Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

14

Description

I have a snack bar with a custom component. In this component I have a custom action button. I want this button to be in the primary color, so I set the color attribute of the button to "primary":

<button mat-button color="primary" matSnackBarAction>
  My custom action
</button>

Before MDC, the color attribute was respected, and the button changed its color accordingly. After MDC migration, the button stays in the accent color regardless of what color is set.

Reproduction

StackBlitz link: https://stackblitz.com/edit/kbv7nf

Steps to reproduce:

1. Create a custom snack bar component / template
2. Add an action button to the custom snack bar
3. Set the color of the action button to "primary"

Expected Behavior

The button is displayed in the primary color

Actual Behavior

The button is displayed in the accent color

Environment

• Angular: 16
• CDK/Material: 16
• Browser(s): all
• Operating System (e.g. Windows, macOS, Ubuntu): all

Further notes

I investigated the issue a bit, and it seems like using the matSnackBarAction directive overrides the color of the button. Omitting this directive fixes the issue, however the docs state that this directive should be used.

[kharazian]

Hello!

After a thorough investigation, I have identified that the issue originates from the following CSS code in the snack-bar-container.scss:

// The `mat-mdc-button` and `:not(:disabled)` here are redundant, but I need them to increase
// the specificity over the button styles that may bleed in from the rest of the app.
.mat-mdc-button.mat-mdc-snack-bar-action:not(:disabled) {
  // MDC's `action-label-text-color` should be able to do this, but the button theme has a
  // higher specificity so it ends up overriding it. I defined my own variable that I can
  // use to control the color instead.

In an effort to resolve the problem, I experimented with adding the following CSS, which seems to effectively address the concern and display the button in the desired color:

.mat-mdc-button.mat-mdc-snack-bar-action:not(:disabled) :not([color]) {

Although my proposed solution appears to work as intended, I am uncertain if it aligns with best practices.

[vmuresanu]

I would like to add here that you don't necessarily have to create a custom snackbar component in order to experience this issue. Since Angular 15 we can override scss variables in order to change the desired styles. For instance:
Typescript:

    openSnackbar() {
        this.snackBar.open(message, 'X', {
          panelClass: ['success-snackbar '],
          verticalPosition: 'top',
          horizontalPosition: 'center',
        });
     }

global CSS (styles.scss):

.mat-mdc-snack-bar-container {
  &.success-snackbar {
    --mdc-snackbar-container-color: green;
    --mat-mdc-snack-bar-container: red;
    --mdc-snackbar-supporting-text-color: blue;
  }
}

The following snipets result in:

As seen from the screenshot the --mdc-snackbar-container-color and --mdc-snackbar-supporting-text-color are being overriden, but not the --mat-mdc-snack-bar-button-color variable.

I have attached the broken stackblitz (Angular 17.0.0 but reproducible in 16.2.x as well) - https://stackblitz.com/edit/ptc6zb?file=src%2Fstyles.scss,src%2Fexample%2Fsnack-bar-overview-example.ts
And a working example from Angular 15.2.8 - https://stackblitz.com/edit/angular-uwlwmz?file=src%2Fstyles.scss,src%2Fapp%2Fsnack-bar-overview-example.ts

It would appear that @json-derulo 's PR #27511 might fix the issue

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}