Angular中自定义CSS类样式被外部库覆盖的解决方法咨询

当组件内设置的.c-input--select padding样式被外部库覆盖时，没必要添加冗余的外层div，以下是更简洁且符合Angular规范的解决方式：

1. 提升选择器优先级（推荐） #

利用Angular组件的:host伪类绑定宿主元素，增强选择器权重，同时避免样式全局污染：

:host .c-input--select {
  padding: 1.5rem;
}

如果权重还是不够，可以结合原类名的组合选择器进一步加强：

:host .c-input.c-input--select {
  padding: 1.5rem;
}

万不得已时才用!important，它会破坏样式优先级规则，尽量避免：

.c-input--select {
  padding: 1.5rem !important;
}

2. 使用::ng-deep穿透视图封装（按需使用） #

Angular默认的视图封装会隔离组件样式，::ng-deep可以穿透封装直接作用到目标元素，配合:host使用避免全局污染：

:host ::ng-deep .c-input--select {
  padding: 1.5rem;
}

注意：::ng-deep属于已标记为废弃的语法，但目前Angular仍支持，若追求长期兼容性，优先用第一种方案。

3. 调整样式加载顺序 #

确保组件样式在外部CSS库之后加载，Angular中可在angular.json的styles数组中调整顺序，把组件相关样式放在外部库后面：

"styles": [
  "path/to/external-library.css",
  "src/styles.scss",
  "src/app/test-select/test-select.component.scss"
]

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