如何在共享Module A的Module B、Module C中修改Module A的样式且不改动全局CSS？

我之前在项目里也遇到过一模一样的问题，Angular默认的样式封装机制会把每个组件的样式隔离开，所以你在Module B/C的独立CSS里写的样式根本碰不到嵌套的Module A组件。下面给你几个不用改全局CSS的解决方案，按需选就行：

方案1：用 ::ng-deep 穿透样式隔离（快速解决） #

::ng-deep 可以打破Angular的样式封装，让当前组件的样式影响到嵌套的子组件。不过为了避免污染全局样式，一定要结合 :host 选择器（:host 代表当前组件的宿主元素），这样样式只会作用于当前组件内部的Module A。

Module B的CSS代码： #

:host ::ng-deep .section-top-padding {
  padding-top: 10px;
  padding-bottom: 5rem;
}

Module C的CSS代码： #

:host ::ng-deep .section-top-padding {
  padding-top: 0px;
  padding-bottom: 4.0625rem;
}

方案2：给Module A添加输入属性（优雅的组件化方案） #

这个方法更符合Angular的组件设计思想，通过给Module A定义输入参数，让父组件（Module B/C）动态传递样式值，完全不需要样式穿透。

第一步：修改Module A的组件代码 #

在Module A的 .ts 文件里添加输入属性：

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

@Component({
  selector: 'app-module-A',
  templateUrl: './module-A.component.html',
  styleUrls: ['./module-A.component.css']
})
export class ModuleAComponent {
  // 默认值沿用全局CSS里的原样式
  @Input() sectionTopPadding = '11.25rem';
  @Input() sectionBottomPadding = '4.0625rem';
}

第二步：修改Module A的HTML模板 #

把样式绑定到应用 .section-top-padding 的元素上（假设是个容器div）：

<!-- 方式1：直接绑定内联样式 -->
<div [style.paddingTop]="sectionTopPadding" [style.paddingBottom]="sectionBottomPadding">
  <!-- Module A的内容 -->
</div>

<!-- 方式2：保留原类，用ngStyle覆盖 -->
<div class="section-top-padding" [ngStyle]="{
  'padding-top': sectionTopPadding,
  'padding-bottom': sectionBottomPadding
}">
  <!-- Module A的内容 -->
</div>

第三步：在Module B/C中传递参数 #

Module B的HTML：

<app-module-A sectionTopPadding="10px" sectionBottomPadding="5rem"></app-module-A>

Module C的HTML：

<app-module-A sectionTopPadding="0px" sectionBottomPadding="4.0625rem"></app-module-A>

为什么之前的方法没生效？ #

Angular默认使用 ViewEncapsulation.Emulated 模式，会给每个组件的DOM元素和样式添加独特的属性（比如 _ngcontent-xxx）。你在Module B的CSS里写的 .section-top-padding 只会匹配带有Module B专属属性的元素，而Module A的元素带有自己的专属属性，所以样式根本不会生效。

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