Angular项目中如何仅为当前组件修改CSS样式？

你当前的问题根源是设置了encapsulation: ViewEncapsulation.None，这个配置会取消Angular的样式隔离机制，把组件内定义的样式直接注入全局样式表，导致所有组件都受影响。

正确的实现方式： #

• 移除encapsulation: ViewEncapsulation.None配置，Angular默认的ViewEncapsulation.Emulated会自动为组件样式添加专属属性，确保样式只作用于当前组件内部的元素。
• 如果需要覆盖第三方组件的样式（默认样式优先级不够时），使用Angular提供的:host ::ng-deep伪类组合，既可以穿透到子组件，又能限定样式仅在当前组件范围内生效，同时避免滥用!important。

修改后的代码示例： #

selector: 'app-container',
templateUrl: './app.component.html',
styles: [
  `:host ::ng-deep .cd1-overe{
    top: auto;
  }
  :host ::ng-deep .cd1r .cd2{
    top: 7rem;
  }`
]

补充说明： #

!important会强制提升样式优先级，但容易引发样式冲突，建议优先通过:host ::ng-deep结合组件自身的样式隔离机制来实现需求，保持样式的可维护性。

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