CODEWITHSUNDEEP
htmlcssangularangular-material
Ana
Ana

Reputation: 165

How to overwrite a class-library button for drop down (Angular 4+)?

I am using the Angular Material library for a drop-down navigation bar. The problem is that I would like to hover through the list. I cannot change the style in HTML, but can easily do it in Chrome.

/* Class set by Angular Material itself */

button.mat-menu-item:hover {
    width: 100%;
    color: green;
}

<mat-menu #menu="matMenu">
  <a href="https://google.com"><button mat-menu-item>Help</button></a>
  <button mat-menu-item (click)="Logout()">Sign Out</button>
</mat-menu>

When I set this in CSS, it doesn't work. I tried giving it class, but it doesn't work.

Upvotes: 1

Views: 457

Answers (3)

Ethan Vu
Ethan Vu

Reputation: 2987

Because of angular style encapsulation. Like @devpato mentioned, you must use ::ng-deep to archive the styling you want for the mat button component.

But it important to understand that using ::ng-deep alone will apply that style to all button with .mat-menu-item class in your app.

So if you want the style to effect to a specific component only, use :host before it (the :host mean the component that is hosting mat button component )

:host ::ng-deep button.mat-menu-item:hover {
   ....
}

Upvotes: 1

suiwenfeng
suiwenfeng

Reputation: 2003

button {
  -webkit-transition-duration: 0.4s; /* Safari */
  transition-duration: 0.4s;
}

button:hover {
  background-color: #4CAF50; /* Green */
  color: white;
}
<mat-menu #menu="matMenu">
              <a href="https://google.com"><button mat-menu-item>Help</button></a>
              <button mat-menu-item (click)="Logout()">Sign Out</button>
</mat-menu>

Upvotes: 0

Patricio Vargas
Patricio Vargas

Reputation: 5522

Try this:

using ::ng-deep. It will be replaticated at some point but it works right now. 

::ng-deep button.mat-menu-item:hover {
    width: 100%;
    color: green;
}

Upvotes: 0

Related Questions