如何解决Angular组件中MDBootstrap手风琴自定义padding样式不生效问题

Angular 默认开启了视图封装（ViewEncapsulation.Emulated），组件内部写的样式默认只能作用于当前组件模板中直接定义的DOM元素，无法作用于第三方组件内部的子元素，所以你写的accordion-button样式规则根本没有匹配到目标元素，不是优先级被覆盖的问题。

• 方法1：使用::ng-deep穿透样式封装（最常用，无需修改封装模式）
  给选择器加上:host前缀避免样式泄露到全局，写法如下：

  :host ::ng-deep .accordion-button {
    padding: 0;
  }
  

  注意：如果浏览器检查元素里目标元素的accordion-button是标签名而非类名，去掉选择器前的.即可。
  叠加更多父级选择器可以提升优先级，不需要加!important也能覆盖默认样式，例如：

  :host ::ng-deep .accordion .accordion-item .accordion-button {
    padding: 0;
  }
  

• 方法2：关闭当前组件的视图封装
  在当前组件的@Component装饰器中添加配置：

  import { ViewEncapsulation } from '@angular/core';
  
  @Component({
    // 其他配置不变
    encapsulation: ViewEncapsulation.None
  })
  

  关闭后样式会全局生效，建议给你的手风琴组件外层添加自定义类限制作用范围，例如给手风琴标签加class="custom-accordion"，样式写法：

  .custom-accordion .accordion-button {
    padding: 0;
  }
  

• 方法3：将样式写到全局样式文件
  把规则写到项目根目录的styles.scss全局样式文件中，同样建议加自定义父类前缀避免污染其他页面的手风琴组件。

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