Angular中如何避免特定CSS文件对自定义组件产生样式影响

• 增加选择器限定缩小作用范围
  在你的组件样式中，给.Modal、.Modal-header前拼接当前组件的选择器做前缀，假设你的组件选择器为app-my-modal，写法如下：

app-my-modal .Modal {
  /* 你的自定义样式 */
}
app-my-modal .Modal-header {
  /* 你的自定义样式 */
}

该方案不需要使用::ng-deep即可将样式范围限定在当前组件内，优先级天然高于Bootstrap的全局同名样式，不会造成全局污染。

• 修正::ng-deep的用法
  如果你需要保留::ng-deep的写法，必须在前面增加:host限定作用域，避免样式泄露到全局，示例代码：

:host ::ng-deep .Modal {
  /* 你的自定义样式 */
}

该写法只会让样式作用在当前组件内部的匹配元素上，不会和全局的Bootstrap样式互相干扰。

• 调整全局样式加载顺序
  打开项目根目录的angular.json文件，找到build配置下的styles数组，把Bootstrap的CSS文件路径放在自定义全局CSS文件的前面，后续加载的自定义样式会天然覆盖前面加载的Bootstrap同名类样式，无需修改类名即可生效。
• 给模态框增加专属限定类
  如果使用的是ng-bootstrap模态框，调用时通过windowClass参数传入专属类名：

this.modalService.open(ModalContent, { windowClass: 'my-custom-modal' })

之后的自定义样式都基于这个专属类做前缀即可：

.my-custom-modal .Modal-header {
  /* 你的自定义样式 */
}

如果是原生Bootstrap模态框，直接在模态框DOM上添加专属类即可：<div class="Modal my-custom-modal">。

• 临时快速修复方案
  如果仅需要快速修复单个属性冲突，可以在对应样式属性后添加!important提升优先级，该方案生效最快但不建议高频使用，避免后续样式维护混乱。

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