如何在Angular项目中引入全局CSS并覆盖组件默认样式？

全局CSS生效但无法覆盖组件默认样式，是因为Angular的ViewEncapsulation（如Emulated或ShadowDom）隔离了样式作用域，第三方库样式常位于Shadow DOM内或具有高特异性，全局规则无法穿透；可靠方案是优先使用CSS自定义属性（如--primary-color）在:root定义并由组件读取，或在组件内通过:host和自身styleUrls控制，而非依赖::ng-deep等废弃方式。

全局CSS能生效，但覆盖不了组件默认样式，不是配置错了，而是没理解Angular的样式作用域机制——styles数组注入的是全局样式表，而组件默认样式（尤其来自Ionic、Angular Material这类库）往往在Shadow DOM里或带高特异性选择器，直接写.btn { color: red; }大概率被忽略。

全局CSS必须加在angular.json的build.options.styles里

加错位置等于没加：塞进serve.options.styles或test.options.styles，ng build后产物里压根没有这些样式。只有projects → [项目名] → architect → build → options → styles这个路径才被构建流程真正读取。

1. 路径必须相对于angular.json所在目录（即项目根目录），写"src/styles.scss"✅，写"styles.scss"❌（报File not found）
2. 支持.css、.scss、.sass，但.less需额外配loader，CLI默认不认
3. 顺序 = 层叠优先级："src/assets/css/reset.css"放最前，"node_modules/@angular/material/prebuilt-themes/indigo-pink.css"居中，"src/styles.scss"放最后——你的自定义规则才能有机会覆盖框架

为什么:host和组件内样式总被覆盖

Angular默认用ViewEncapsulation.Emulated，给组件样式加了[_nghost-abc123]这种属性选择器，天然隔离；而第三方库（如Ionic 6）很多直接用原生Shadow DOM，:host规则完全不受全局CSS影响。

1. 查浏览器开发者工具的Computed面板，看inset或position这类属性“赢”的是哪条规则——大概率是Ionic源码里的:host { inset: 0; }，它在Shadow DOM里，你写的:host { inset: unset; }在全局样式里，根本穿不进去
2. 别依赖::ng-deep：它已被标记为废弃，且只对Emulated模式有效，对Shadow DOM无效
3. 真正能穿透的只有两种方式：:host ::ng-deep .ion-content（临时应急）或改用CSS自定义属性（比如--ion-content-padding）在全局定义，再让组件读取

覆盖组件默认样式的可靠做法

硬刚选择器权重不如绕开封装限制。全局CSS不是万能胶，得配合组件自身的样式控制点。

1. 优先用CSS自定义属性：在src/styles.scss里定义:root { --primary-color: #2a5dcc; }，然后在Ionic组件模板里写<ion-button style="--background: var(--primary-color);">——这是最新推荐的、跨Shadow DOM的主题传递方式
2. 组件内显式加类：<ion-button class="my-btn-primary">，再在组件自己的styleUrls里写.my-btn-primary { --background: #2a5dcc; }，不碰全局，也不依赖穿透
3. 如果必须改宿主元素，把:host规则写进组件自己的SCSS文件（不是全局styles.scss），并确保它在编译时排在Ionic样式之后——Angular CLI会按styleUrls数组顺序合并，所以['../shared/base.scss', './my-page.page.scss']比单写一个更可控

最常被忽略的一点：改完angular.json必须重启ng serve，热更新不会监听这个文件；而且浏览器缓存的styles.css可能还是旧的，强制刷新（Ctrl+Shift+R）比反复检查配置更快定位问题。