Angular material 在运行时向Angular 9中的全局覆盖添加CSS类

我正在创建一个Angular 9 web应用程序，根据用户的选择更改主题，类似于。为了处理mat select的透明背景，我参考了 角度材质，在全局覆盖容器中添加自定义主题类，如下所示

export class AppModule {
  constructor(overlayContainer: OverlayContainer) {
    overlayContainer.getContainerElement().classList.add('purple-amber');
    overlayContainer.getContainerElement().classList.add('indigo-pink');
    overlayContainer.getContainerElement().classList.add('pink-bluegrey');
    overlayContainer.getContainerElement().classList.add('purple-green');
  }
 }

---

但是，mat select元素始终具有最后添加的类（在本例中为紫绿色）作为覆盖，而不管我选择的主题是什么。我怎样才能解决这个问题？是否有一种方法可以通过组件的TypeScript文件将主题添加到类列表中？

假设您有两个主题：“紫色琥珀色”和“靛蓝粉色”，这些主题通过单击按钮进行更改

您需要在单击这些按钮时调用函数

some-component.html：

...
<button mat-raised-button (click)="applyPurpleTheme()">Purple Amber</button>
<button mat-raised-button (click)="applyIndigoTheme()">Indigo Pink</button>
...

---

假设你有两个主题：“紫色琥珀色”和“靛蓝粉色”，这些主题通过点击按钮来改变

您需要在单击这些按钮时调用函数

some-component.html：

...
<button mat-raised-button (click)="applyPurpleTheme()">Purple Amber</button>
<button mat-raised-button (click)="applyIndigoTheme()">Indigo Pink</button>
...

---

谢谢你，这很管用。知道为什么我们必须先把这个类删除到列表中，然后再添加一个新类吗？如果我不删除该类，它将不起作用。因为它会导致类与覆盖面板之间的“冲突”。如果您检查一个覆盖，您可以看到如下内容：

。如果叠加有多个主题类，可能是最后一个应用的主题类。这就像黄油一样有效，谢谢。知道为什么我们必须先把这个类删除到列表中，然后再添加一个新类吗？如果我不删除该类，它将不起作用。因为它会导致类与覆盖面板之间的“冲突”。如果您检查一个覆盖，您可以看到如下内容：

。如果覆盖有多个主题类，则可能是应用的最后一个主题类。