我有這個按鈕

<button mat-icon-button color="black" style="height: 21px; bottom: 8px;" *ngIf="!transaction.HasMatch" (click)="matchPayable($event, transaction)">
   <mat-icon style="line-height: 20px;">playlist_add</mat-icon>
</button>

問題是，當(dāng)我點擊按鈕時，焦點并不完全在圖標(biāo)周圍，就像這張截圖一樣。 所以重心需要下移，但是不知道怎么下移。 這將是完全消除聚焦效應(yīng)的替代方案。我也不知道如何實現(xiàn)這一點。

將定制的CSS應(yīng)用到::ng-deep偽元素將允許您更改mat-icon-button的焦點位置。要根據(jù)您的情況移動焦點影響下方，請粘貼如下所示的CSS代碼:

::ng-deep .mat-icon-button:focus:not(.cdk-focused) {
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16), 0px 3px 6px rgba(0, 0, 0, 0.23);
  outline: none;
}

::ng-deep .mat-icon-button:focus:not(.cdk-focused)::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -5px; /* adjust this value to move the focus effect downwards */
  width: 100%;
  height: 100%;
  border-radius: 50%;
  animation: ripple 1s linear;
  z-index: -1;
}

@keyframes ripple {
  from {
    transform: scale(0);
    opacity: 0.5;
  }
  to {
    transform: scale(2);
    opacity: 0;
  }
}

mat-icon-button元素將從這段代碼中獲得一個自定義的焦點效果，將重點向右移動5個像素。底部值可以改變，以根據(jù)需要上下調(diào)整聚焦效果。

您應(yīng)該知道::ng-deep是一個不推薦使用的偽選擇器，應(yīng)該使用單獨的方法將樣式應(yīng)用到子組件。

最簡單的修復(fù)方法如下:

<button mat-icon-button color="black" style="height: 25px; width: 25px; left: 3px;" *ngIf="!transaction.HasMatch" (click)="matchPayable($event, transaction)">
            <mat-icon style="line-height: 10px;" >playlist_add</mat-icon>
        </button>