OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

Matsnackbar button color not changing

  • Thread starter Thread starter Pablo Caballero María
  • Start date Start date
P

Pablo Caballero María

Guest
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:

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

And this is the corresponding CSS class:

Code:
.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 :)
<p>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:</p>
<pre><code>error: (e) => this.snackBar.open(e, 'Close', {
panelClass: ['custom-snack-bar']
})
</code></pre>
<p>And this is the corresponding CSS class:</p>
<pre><code>.custom-snack-bar {
background-color: white;
color: gray;
}

.custom-snack-bar button {
background-color: red;
color: white !important;
}
</code></pre>
<p>(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.</p>
<p><a href="https://i.sstatic.net/GJe8wOQE.png" rel="nofollow noreferrer">This is the snack bar normally</a></p>
<p><a href="https://i.sstatic.net/4atWnpKL.png" rel="nofollow noreferrer">And this is it on hover or clicking the "close" button</a></p>
<p>Any help is welcome :)</p>
Continue reading...
 

Latest posts

Online statistics

Members online
0
Guests online
4
Total visitors
4
Top