Angular包装组件中如何设置投影内容的样式？

问题本质 #

你遇到的核心问题是**Angular视图封装（View Encapsulation）**导致的样式隔离机制。

默认情况下，Angular组件启用Emulated模式的视图封装：

• 组件模板内的DOM元素会被自动添加专属的_ngcontent-xxx属性
• 组件内的CSS规则也会被注入对应的属性选择器，比如你的.app-toolbar button会被处理成.app-toolbar[_ngcontent-xxx] button[_ngcontent-xxx]

而通过<ng-content>投影进来的按钮属于父组件的视图，带有父组件的_ngcontent属性，和子组件的属性不匹配，因此子组件的CSS选择器无法命中这些按钮，样式自然无法生效。

你尝试的button、&>button、button+button等选择器，都会被Angular自动加上子组件的_ngcontent属性后缀，根本匹配不到投影进来的按钮元素。

临时方案生效的原因 #

你用column-gap: 8px的方法能生效，是因为这个属性是作用在.app-toolbar容器本身的——容器属于子组件模板内的元素，带有子组件的_ngcontent属性，所以对应的CSS规则能正常生效。而flex布局的column-gap是控制容器内子元素（包括投影内容）之间的间隙，不需要直接给按钮设置样式，自然避开了样式隔离的限制。

针对margin需求的解决方案 #

如果一定要用margin-right实现按钮间距，可以用以下几种方法：

1. 使用::ng-deep穿透样式隔离 #

这是Angular提供的专门用于突破视图封装的语法，能让组件内的样式作用到投影内容：

.app-toolbar {
  ::ng-deep button {
    margin-right: 8px;
  }
}

注：::ng-deep虽被标记为deprecated，但目前Angular仍未推出正式替代方案，实际项目中仍被广泛使用。

2. 关闭组件的视图封装 #

在组件装饰器中关闭视图封装，组件的CSS会变为全局样式（需注意避免样式污染）：

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

@Component({
  selector: 'app-toolbar-wrapper',
  templateUrl: './toolbar-wrapper.component.html',
  styleUrls: ['./toolbar-wrapper.component.scss'],
  encapsulation: ViewEncapsulation.None
})
export class ToolbarWrapperComponent {}

建议搭配更具体的选择器，比如.app-toolbar button，避免影响全局其他按钮样式。

3. 在父组件中定义样式 #

因为投影的按钮属于父组件的视图，直接在父组件的CSS中设置按钮间距即可：

/* 父组件的样式文件 */
app-toolbar-wrapper button {
  margin-right: 8px;
}

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