Angular 12中::ng-deep已被废弃？这是唯一可行的方案吗？

我之前在项目里也遇到过一模一样的困扰——::ng-deep被标记废弃，单纯用:host又搞不定ngx-charts内部的文本样式。下面几个方案亲测有效，你可以根据自己的场景选择：

• 方案1：关闭组件视图封装（需注意样式隔离）
  给你的图表组件外层加一个独特的父类，比如模板最外层写 <div class="my-custom-chart-container">，然后在组件样式里写：

  .my-custom-chart-container .ngx-charts text {
    fill: #ff0000;
  }
  

  接着在组件装饰器中关闭视图封装：

  @Component({
    // ...其他组件配置
    encapsulation: ViewEncapsulation.None
  })
  

  👉 注意：关闭封装后组件样式会全局生效，一定要用专属类包裹，避免污染其他组件的样式。

• 方案2：在全局样式文件中精准定位
  如果不想修改组件封装，可以直接在项目全局样式文件（比如styles.css/styles.scss）里写样式，但要给目标图表加专属类限定范围。比如在组件宿主元素上添加类：

  <app-my-chart class="red-text-ngx-chart"></app-my-chart>
  

  然后全局样式里写：

  .red-text-ngx-chart .ngx-charts text {
    fill: #ff0000;
  }
  

  这个方案最安全，不会有样式泄漏问题，只是样式写在全局文件里，维护时要注意关联对应组件。

• 方案3：用:host::ng-deep做过渡（兼容且更安全）
  虽然::ng-deep被标记废弃，但目前Angular还没有移除它的计划。如果结合:host一起使用，样式只会作用于当前组件内部的子元素，不会污染全局：

  :host::ng-deep .ngx-charts text {
    fill: #ff0000;
  }
  

  这是最接近你原写法的过渡方案，不用改太多代码，且比单独用::ng-deep安全很多。

• 方案4：优先使用ngx-charts官方提供的样式输入
  很多ngx-charts组件自带了自定义样式的输入属性，比如部分图表支持[textStyle]或通过chartOptions传递样式配置。比如你可以试试：

  <ngx-charts-bar-chart
    [textStyle]="{ fill: '#ff0000' }"
    // ...其他图表配置
  ></ngx-charts-bar-chart>
  

  这是最推荐的方案，属于官方支持的方式，完全不会有样式封装的问题。你可以查看使用的具体图表组件API文档，确认是否有类似的样式输入属性。

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