使用::ng-deep覆盖Angular Material遇SonarQube报错，寻求解决方案

我完全懂你的烦恼——为了覆盖Angular Material的样式用了::ng-deep，结果被SonarQube揪出来报「Unexpected unknown pseudo-element selector "::ng-deep"」错误。别慌，这里有几个既合规又能解决问题的办法：

1. 用ViewEncapsulation.None+组件专属类限定样式范围 #

::ng-deep本质是突破Angular的视图封装，我们可以主动关闭当前组件的视图封装，再通过组件根元素的专属类来限定样式作用域，避免全局污染：

步骤1：在组件中设置视图封装为None #

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

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.scss'],
  // 关闭视图封装
  encapsulation: ViewEncapsulation.None
})
export class YourComponentComponent { }

步骤2：在组件样式中用专属类包裹覆盖样式 #

给组件的根元素（比如模板最外层的div）加上独特的类名，然后在样式里嵌套写覆盖规则：

/* your-component.component.scss */
.your-component-root {
  /* 这里写针对Angular Material组件的覆盖样式 */
  .mat-card-header {
    background-color: #f5f5f5;
  }
  .mat-button {
    border-radius: 4px;
  }
}

2. 利用全局样式文件+组件选择器限定 #

如果不想修改组件的视图封装，可以直接在Angular的全局样式文件（比如styles.scss）里，通过组件的选择器来限定样式作用域，这样样式只会作用于目标组件内的Material元素：

/* styles.scss */
app-your-component .mat-card-header {
  background-color: #f5f5f5;
}
app-your-component .mat-button {
  border-radius: 4px;
}

⚠️ 注意：这种方式要确保组件选择器足够独特，避免影响其他组件。

3. 使用Angular Material支持的CSS变量（推荐） #

很多Angular Material组件已经支持通过自定义CSS变量来修改样式，这是最官方、最合规的方式，完全不需要用到::ng-deep：

比如修改按钮的背景色，只需在组件内的:host选择器里定义变量：

/* your-component.component.scss */
:host {
  --mat-button-container-color: #your-custom-color;
  --mat-button-label-color: #fff;
}

你可以查看对应Material组件的官方文档，找到支持的CSS变量列表。

4. （下策）在SonarQube中忽略该规则 #

如果你实在离不开::ng-deep，可以在SonarQube的配置里忽略这个未知伪元素的检查：

在项目的sonar-project.properties文件中添加：

# 忽略CSS未知伪元素规则
sonar.css.ignoreRules=css:unknown-pseudo-element

或者针对特定文件忽略，但要注意::ng-deep已经被Angular标记为废弃特性，未来可能会被移除，所以不推荐长期依赖。

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