javascript - 如何消除 Angular 垫按钮切换悬停效果？

Question

我正在尝试删除 mat-button-toggle 的默认悬停效果。但不知怎的，我无法超越它。每当我将鼠标悬停在按钮上时，我都会收到此 white shady background 。

.html 文件:

<div class="header">
  <mat-button-toggle-group class="mat-menu" [value]=target>
    <mat-button-toggle (change)="redirekt($event.value)" value="/" [disableRipple]="true" class="mat-menu-item">Home</mat-button-toggle>
    <mat-button-toggle (change)="redirekt($event.value)" value="/test" [disableRipple]="true" class="mat-menu-item">Test</mat-button-toggle>
  </mat-button-toggle-group>
</div>
<div class="outlet">
  <router-outlet></router-outlet>
</div>

.scss 文件:

.mat-menu {
  width: 100%;
  border: none !important;
  border-radius: 0px;
  position: relative;
  background: mat_color($primary);
  text-align: left;
}

.mat-menu-item {
  align-self: center;

  margin: 0px 8px;
  font-size: 15px;

  @media (min-width: 768px) {
    margin: 5px 8px;
    font-size: 20px;
  }

  border: none !important;
  color: white;

  &:hover, &:focus, &:active {
    background-color: transparent !important;
    @media only screen and (min-width: 768px) {
      -webkit-transform: scale(1.1);
      transform: scale(1.1);
    }
  }
}

.mat-button-toggle-checked {
    color: mat-color($accent) !important;
}

Answer 1

在 2023 MatButtonModule，@angular/material 版本 ^15.1.3 中，您可以修改 CSS3 变量。

.mat-mdc-button {
  --mat-mdc-button-persistent-ripple-color: none;
}

请注意，您需要在 @Component 装饰器中添加encapsulation: ViewEncapsulation.None。