如何为Angular自定义组件内部的div正确设置CSS样式

Angular 默认使用 Emulated 视图封装 模式，会给组件模板内的元素加上专属的作用域属性，父组件写的普通CSS选择器无法穿透组件边界，匹配不到自定义子组件内部的元素，所以你写的嵌套选择器不会生效。

根据你的场景选下面任意一种方案即可：

• 方案1：使用::ng-deep选择器做样式穿透（业务开发最常用）
  给需要穿透组件边界的选择器加上::ng-deep前缀即可，必须在外层套上当前组件内的父级选择器做作用域限制，避免样式泄漏成全局样式。调整后的CSS代码如下：

  .outer {
    ::ng-deep custom-component > .inner {
      border: solid 1px orange;
    }
  }
  

• 方案2：关闭自定义组件的视图封装（仅适合你可维护自定义组件源码的场景）
  如果你是custom-component的开发者，可以直接在组件装饰器里把封装模式设为None，去掉样式隔离，外部写的普通选择器就能直接命中内部元素：

  import { ViewEncapsulation } from '@angular/core';
  
  @Component({
    selector: 'custom-component',
    templateUrl: './custom-component.component.html',
    // 关闭视图封装
    encapsulation: ViewEncapsulation.None
  })
  export class CustomComponent {}
  

  注意：这个配置会让该组件的所有内部样式都变成全局生效，非通用公共组件不建议随意使用。
• 方案3：通过CSS自定义属性传值（最符合组件封装规范的方案）
  如果不想破坏组件封装、也不想用穿透选择器，可以在自定义组件内部给.inner的样式预留CSS变量位，父组件直接给变量赋值即可：
  1. 先在自定义组件的样式文件里配置：

  /* custom-component 自身的样式 */
  .inner {
    border: var(--inner-element-border, none);
  }
  

  2. 父组件直接给自定义组件节点传变量值，不需要穿透：

  .outer custom-component {
    --inner-element-border: solid 1px orange;
  }
  

补充：不要直接在全局样式文件里写这个选择器，虽然也能生效，但很容易造成全局样式污染，排查问题成本很高。

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