使用ngClass为mat-autocomplete面板设置条件样式失败，求解决方案

问题核心在于mat-autocomplete的面板DOM元素不属于mat-autocomplete组件的子节点——它是通过Angular CDK的Overlay服务渲染到DOM的独立位置（通常是body下），因此你给mat-autocomplete元素添加的ngClass无法作用到面板上。正确的做法是使用mat-autocomplete提供的panelClass输入属性，直接给面板绑定动态类名。

方法一：使用panelClass动态绑定类名 #

1. 修改HTML代码 #

将原有的[ngClass]替换为[panelClass]，根据currentTheme的值直接绑定对应类：

<mat-autocomplete [panelClass]="currentTheme === 'dark' ? 'dark' : 'default'">
  <mat-option *ngFor="let option of filteredOptions | async" [value]="option">
    {{ option }}
  </mat-option>
</mat-autocomplete>

也可以用对象语法实现条件绑定：

<mat-autocomplete [panelClass]="{ 'dark': currentTheme === 'dark', 'default': currentTheme !== 'dark' }">
  <mat-option *ngFor="let option of filteredOptions | async" [value]="option">
    {{ option }}
  </mat-option>
</mat-autocomplete>

2. 简化CSS代码 #

panelClass会直接把类名加到.mat-autocomplete-panel元素上，因此不需要嵌套选择器，直接编写样式：

/* 提取公共样式，减少重复 */
::ng-deep .mat-autocomplete-panel {
  border: 1px solid #e4e9f2; 
  border-radius: 0.25rem;
  font-family: exo; 
  font-weight: 400;
  margin-top: 5px;
}

/* 默认主题样式 */
::ng-deep .mat-autocomplete-panel.default {
  background-color: white !important;  
}

/* 暗黑主题样式 */
::ng-deep .mat-autocomplete-panel.dark {
  background-color: black !important;  
}

方法二：全局主题切换（推荐全站点主题场景） #

如果主题是全局生效的，可以把主题类加到body元素上，无需每个组件单独处理：

1. 在根组件中设置body类 #

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  currentTheme = 'dark'; // 实际项目可从服务/本地存储获取

  ngOnInit() {
    // 初始化主题类
    document.body.classList.add(this.currentTheme);
  }

  // 切换主题时调用
  switchTheme(newTheme: string) {
    document.body.classList.replace(this.currentTheme, newTheme);
    this.currentTheme = newTheme;
  }
}

2. 编写全局CSS样式 #

此时无需使用::ng-deep，直接通过body类控制面板样式：

/* 默认主题下的面板样式 */
body.default .mat-autocomplete-panel {
  background-color: white;  
  border: 1px solid #e4e9f2; 
  border-radius: 0.25rem;
  font-family: exo; 
  font-weight: 400;
  margin-top: 5px;
}

/* 暗黑主题下的面板样式 */
body.dark .mat-autocomplete-panel {
  background-color: black;  
  border: 1px solid #e4e9f2; 
  border-radius: 0.25rem;
  font-family: exo; 
  font-weight: 400;
  margin-top: 5px;
}

内容的提问来源于stack exchange，提问作者WIMA