Angular中mat-card绑定[className]后原生类及样式不生效问题

[className]在Angular中是对元素class属性的全量覆盖绑定，不会保留原有属性值。Angular Material组件初始化时，会自动给宿主元素注入自身依赖的原生类名（比如mat-card、对应尺寸/交互的预设类），直接用[className]绑定自定义返回值时，组件自动添加的原生类会被完全替换，最终DOM上只剩你自定义方法返回的类名，Material预设的卡片样式自然就失效了。

<!-- 这种写法会覆盖mat-card自带的所有原生类 -->
<mat-card cdkDropList [className]="getClassName(item)"><!-- 卡片内容 --></mat-card>

样式失效后的DOM表现参考：

以下三种写法都不会覆盖组件原生类，按需选择即可：

• 优先用[ngClass]做类绑定，这是Angular提供的专门做动态类名合并的指令，会自动保留元素原有类，只追加/移除你绑定的自定义类：

<mat-card cdkDropList [ngClass]="getClassName(item)"><!-- 卡片内容 --></mat-card>

• 如果场景特殊必须用[className]，需要在自定义方法返回值里手动拼接mat-card的原生类名：

getClassName(item: any): string {
  // 原有自定义类名判断逻辑
  const customClasses = item.draggable ? 'drop-item dragging' : 'drop-item';
  // 手动拼接mat-card原生类，避免被覆盖
  return `mat-card mat-focus-indicator ${customClasses}`;
}

这种方案不推荐，Angular Material不同版本可能调整组件自带的宿主类名，手动拼接容易漏类，后续升级维护成本高。

• 如果动态类规则简单，直接用[class.类名]的单类绑定写法即可，同样不会覆盖原有类：

<mat-card cdkDropList [class.dragging]="item.isDragging" [class.selected]="item.isSelected"><!-- 卡片内容 --></mat-card>

补充说明：这个问题不是mat-card独有的，所有带默认宿主类的Angular组件（包括Material其他组件、自定义封装组件），都要避免直接用[className]做全量类绑定，否则都可能出现原生类被覆盖、样式失效的问题。

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