Как перезаписать кнопку библиотеки классов для выпадающего меню (Angular 4+)?

Question

Я использую библиотеку материалов для выпадающей панели навигации. Проблема в том, что я хотел бы навести курсор на список. Я не могу изменить стиль в HTML, но могу легко сделать это в Chrome.

//class set by 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>

Когда я устанавливаю это в CSS, это не работает. Я пытался дать ему класс, но это не работает.

Answer 1

Из-за угловой герметизации. Как упомянуто @devpato, вы должны использовать ::ng-deep для архивации стиля, который вы хотите для компонента кнопки мат.

Но важно понимать, что использование только ::ng-deep будет применять этот стиль ко всем кнопкам с .mat-menu-item класс в вашем приложении.

Таким образом, если вы хотите, чтобы стиль воздействовал только на конкретный компонент, используйте :host перед ним (:host означает компонент, на котором размещен компонент кнопки циновки)

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

Answer 2

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>

Answer 3

Попробуйте это:

используя :: ng-deep. Он будет перенесен в какой-то момент, но работает прямо сейчас.

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