如何通过父组件CSS为Angular内部自定义组件添加外边距

问题原因 #

你写的样式不生效是两个核心原因导致的：

1. 选择器不匹配：你当前写的.my-own-component是类选择器，但你在父组件模板中使用<my-own-component>标签时没有给它添加class="my-own-component"，所以这个选择器根本匹配不到对应的元素。
2. Angular视图封装隔离：Angular默认开启视图封装（ViewEncapsulation.Emulated），父组件的样式默认只能作用于自身模板内的原生HTML元素，自定义组件的宿主元素默认不会被父组件的普通样式选择器匹配到。Angular Material示例中的写法生效，是因为.mat-form-field是父组件模板内直接渲染的原生元素上的类，不存在封装隔离问题。

解决方法 #

推荐按优先级选择以下方案：

方案1：子组件内部定义宿主样式（最规范，无需打破封装） #

在my-own-component.component.css中直接添加宿主样式即可：

:host {
  margin-right: 3rem;
  /* 如果是flex布局内的元素可以不用加display，否则建议加display: inline-block确保margin生效 */
}

方案2：父组件使用::ng-deep打破封装（适合不想修改子组件的场景） #

首先修正父组件模板，给自定义组件加对应类（或者直接用标签选择器）：

<my-own-component class="my-own-component"></my-own-component>

然后修改父组件my-panel.component.css中的样式：

.example-headers-align ::ng-deep .my-own-component {
  margin-right: 3rem;
}

如果不想加类，也可以直接用标签选择器：

.example-headers-align ::ng-deep my-own-component {
  margin-right: 3rem;
}

方案3：关闭父组件视图封装（不推荐，会污染全局样式） #

在my-panel.component.ts中修改封装策略：

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

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

之后你原来的样式只要修正选择器匹配问题就可以生效，但该方案会导致当前组件的所有样式变成全局样式，可能和其他组件样式冲突，非必要不建议使用。

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