Angular中如何基于组件标签名修改子组件样式

Angular 默认支持直接通过组件选择器名称匹配子组件宿主元素并添加样式，你写的代码样式未生效不是语法不支持，通常是以下两个原因导致的：

原因1：自定义组件宿主元素默认display属性导致背景不可见 #

Angular渲染生成的自定义组件标签（比如<app-team-thumbnail>），浏览器默认给它的display属性值是inline。行内元素无法正常展示宽高、背景等盒模型属性，就会出现样式写了但看不到效果的问题。
直接给选择器补上布局需要的display属性即可生效：

/* teams-list.component.scss */
app-team-thumbnail {
  display: block; // 也可以根据布局需要设置为inline-block、flex等
  background-color: aqua;
}

注意：这种写法的样式只会作用在<app-team-thumbnail>这个宿主标签本身，不会渗透到子组件的内部元素。

原因2：想要修改子组件内部元素样式，被视图封装规则拦截 #

如果你要改的是子组件模板里的DOM元素样式，Angular默认的Emulated视图封装模式会隔离父子组件样式，父组件的样式默认无法穿透到子组件内部，这种场景可以选以下方案实现：

• 方案1：规范首选，直接在子组件内部通过:host选择器定义宿主样式，需要动态控制的话就加@Input()输入属性，由父组件传入状态、子组件自己控制样式绑定，完全不会有全局样式污染问题。
  子组件样式示例：

  // team-thumbnail.component.scss
  :host {
    display: block;
    background-color: aqua;
  }
  

• 方案2：临时穿透可以用::ng-deep，必须搭配:host前缀限制样式作用域，避免样式泄露到全局：

  /* teams-list.component.scss */
  :host ::ng-deep app-team-thumbnail .thumbnail-content {
    // 这里写要修改的子组件内部元素样式
    background-color: aqua;
  }
  

  注意：Angular官方已经将::ng-deep标记为废弃特性，不推荐在长期维护的项目中大量使用。

常见误区澄清 #

很多开发者误以为父组件无法通过组件选择器匹配子组件，本质是混淆了「子组件宿主元素」和「子组件内部DOM」的边界：宿主元素本身是父组件模板DOM的一部分，默认封装规则下父组件样式可以直接命中；只有子组件模板内部渲染的DOM，才会被视图封装规则隔离。

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