在Angular项目中使用Bootstrap时，经常会遇到自定义的样式或者组件内部样式把Bootstrap原本的样式覆盖，导致按钮、表单、布局等元素的展示效果出现异常，这类问题会影响页面的整体交互和视觉体验。
样式冲突的常见原因
Angular视图封装机制影响
Angular默认采用Emulated视图封装模式，会给组件模板中的元素添加特定的属性标识，同时给组件样式也添加对应的属性选择器，让样式只作用于当前组件。如果Bootstrap的样式没有对应的属性标识，就可能被组件内部的样式覆盖，或者组件样式无法正确覆盖Bootstrap的默认样式。
样式加载顺序问题
CSS样式的加载顺序会影响最终的生效结果，后加载的样式会覆盖先加载的同优先级样式。如果Bootstrap的样式文件加载在自定义样式之后，那么自定义样式中同选择器的规则就会覆盖Bootstrap的样式，反之如果Bootstrap加载在自定义样式之后，也可能覆盖自定义样式。
选择器优先级差异
Bootstrap的样式选择器有固定的优先级，如果自定义样式的选择器优先级更高，就会覆盖Bootstrap的样式。比如使用id选择器的自定义样式，优先级高于Bootstrap使用的class选择器，就会出现覆盖情况。
解决样式冲突的具体方案
调整样式加载顺序
可以在angular.json文件中调整样式文件的引入顺序，确保Bootstrap的样式先加载，自定义全局样式后加载，这样自定义样式中需要覆盖Bootstrap的规则就能正常生效。配置示例如下：
{
"projects": {
"your-project-name": {
"architect": {
"build": {
"options": {
"styles": [
"node_modules/bootstrap/dist/css/bootstrap.min.css",
"src/styles.css"
]
}
}
}
}
}
}
修改视图封装模式
如果只需要某个组件内覆盖Bootstrap样式，可以修改该组件的视图封装模式为None，这样组件内的样式就会变成全局样式，能够正常作用于Bootstrap的元素。组件配置示例如下：
import { Component, ViewEncapsulation } from '@angular/core';
@Component({
selector: 'app-demo',
templateUrl: './demo.component.html',
styleUrls: ['./demo.component.css'],
// 关闭视图封装，样式变为全局生效
encapsulation: ViewEncapsulation.None
})
export class DemoComponent {}
注意这种方式会让组件样式全局生效，可能会影响其他组件的样式，使用时需要做好样式隔离，比如给组件根元素添加唯一的class前缀。
提升选择器优先级
如果需要覆盖Bootstrap的样式，可以提升自定义样式的选择器优先级，比如增加选择器的层级，或者使用更具体的选择器。例如要覆盖Bootstrap的按钮样式，可以这样写：
/* 比Bootstrap的.btn选择器优先级更高 */
.app-container .btn {
background-color: #1890ff;
border-color: #1890ff;
}
使用::ng-deep穿透样式封装
如果希望组件内的样式能够作用于子组件或者Bootstrap的元素，同时不关闭整个组件的视图封装，可以使用::ng-deep选择器，它会让后面的样式规则忽略视图封装的限制，变成全局生效。示例如下：
/* 穿透视图封装，修改Bootstrap按钮样式 */
::ng-deep .btn-primary {
border-radius: 4px;
}
需要注意::ng-deep已经被官方标记为弃用，但目前仍然可以使用，未来可能会被移除，建议优先使用其他方案。
方案选择建议
如果是全局需要覆盖Bootstrap样式，优先调整angular.json中的样式加载顺序，在全局样式文件中编写覆盖规则。如果是单个组件内需要修改Bootstrap样式，优先使用提升选择器优先级的方式，其次考虑使用::ng-deep，尽量避免关闭整个组件的视图封装，减少样式污染的风险。
| 方案 | 适用场景 | 注意事项 |
|---|---|---|
| 调整样式加载顺序 | 全局样式覆盖 | 确保Bootstrap样式先加载 |
| 修改视图封装模式 | 单个组件内大量样式修改 | 避免样式全局污染 |
| 提升选择器优先级 | 少量样式覆盖 | 选择器不要过度嵌套 |
| 使用::ng-deep | 组件内穿透修改子元素样式 | 已被弃用，谨慎使用 |