angular.json与组件CSS设置冲突：组件CSS部分失效求助

我之前也碰到过一模一样的情况！当angular.json里配置的全局CSS和组件自身的CSS规则撞车时，组件样式经常会被全局样式覆盖，咱们一步步来搞定它：

1. 用:host伪类提升组件样式优先级 #

Angular的组件样式默认是有封装的，但如果全局样式用了更具体的选择器（比如直接针对标签或者通用类），就可能盖过组件内的样式。这时候可以用:host伪类绑定组件的宿主元素，让组件内的选择器优先级更高：

/* 组件的CSS文件里 */
:host .my-custom-class {
  background-color: #f0f0f0;
  padding: 1rem;
}

:host代表当前组件的根元素，这样写出来的选择器权重会比全局的普通类选择器更高，能确保组件样式生效。

2. 调整组件的视图封装模式 #

Angular默认使用ViewEncapsulation.Emulated，它会给组件的DOM元素添加专属属性，让组件样式只作用于内部。但如果全局样式用了带属性的选择器（或者你之前修改过封装模式），就可能出现冲突。你可以尝试切换到ShadowDom模式，让组件样式完全隔离在Shadow DOM中，全局样式根本渗透不进来：

// 组件的ts文件
import { Component, ViewEncapsulation } from '@angular/core';

@Component({
  selector: 'app-target-component',
  templateUrl: './target-component.component.html',
  styleUrls: ['./target-component.component.css'],
  encapsulation: ViewEncapsulation.ShadowDom
})
export class TargetComponentComponent {}

注意：ShadowDom需要现代浏览器支持，不过现在主流浏览器（Chrome、Firefox、Edge等）都已经兼容了。

3. 应急方案：用::ng-deep穿透封装（不推荐长期使用） #

如果你只是临时需要覆盖全局样式，或者处理第三方组件的样式冲突，可以用::ng-deep来打破视图封装，但要注意这个特性已经被标记为废弃，未来可能会被移除：

/* 组件CSS里 */
::ng-deep .some-global-class {
  color: #2c3e50 !important;
  /* 尽量少用!important，只有当其他方法都无效时再用 */
}

优先用前两种方法，这个只作为临时救急。

4. 检查全局样式的加载顺序和范围 #

确保你没有把组件的CSS文件误加到angular.json的styles数组里——如果加了，那组件样式就变成全局样式了，自然会和组件自身的样式规则冲突。另外，全局样式里尽量避免写太通用的选择器（比如直接写div、p），尽量用专属类名，减少冲突概率。

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