I am using Material Snack Bar to show message errors, and I am having problems setting the color of the “close” button on hover/active. Essentially, this is the typescript code, where I use a custom class:

error: (e) => this.snackBar.open(e, 'Close', {
        panelClass: ['custom-snack-bar']
      })

And this is the corresponding CSS class:

.custom-snack-bar {
    background-color: white;
    color: gray;
}

.custom-snack-bar button {
    background-color: red;
    color: white !important;
}

(I had to add the !important because otherwise it wouldn’t work). My problem is that now, hovering or clicking the “close” button makes it be the same color as the text inside (white in this case), and I don’t know how to get rid of it. I have tried using :hover and :active pseudo classes and using the generate classes mat-simple-snackbar-action, but nothing seems to work.

This is the snack bar normally

And this is it on hover or clicking the “close” button

Any help is welcome 🙂