Angular 如何使用 ng-deep 但仍然只影響一個組件？

Question

在 Angular 應用程序中，使用 Angular 材料作為主題，我正在嘗試更新 css ZA2F2ED4F8EBCDC4061D 組件中的組件

這會起作用，但會影響所有組件，失去封裝：

::ng-deep .dark-theme { // must have ::ng-deep to see .dark-theme on body
  .action-button:hover {
    color: #ffffff;
  }
}

我怎樣才能得到相同的結果，但只針對一個組件？

我已經嘗試過這里提到的但似乎對我不起作用：

::ng-deep .dark-theme {
  :host .action-button:hover {
    color: #ffffff;
  }
}
// OR
:host ::ng-deep .dark-theme .action-button:hover {
  color: #ffffff;
}

Answer 1

嘗試這個：

當我們將 View Encapsulation(Emulated) 設置為所需的組件時，styles 將僅應用於組件模板中的元素。

@Component({選擇器：'app-emulated-encapsulation'，模板：''，styles：''，封裝：查看Encapsulation.Emulated，})

使用提供的有限信息來實際測試場景，如果在 @Component 塊中設置 Encapsulation 屬性可以解決您的問題，您也可以避免使用 ng-deep 和 host。

請參考 - https://angular.io/guide/view-encapsulation了解更多信息。