手风琴组标题的样式（ngx-bootstrap）？

Question

如何更改 ngx-bootstrap 中手风琴标题的样式？

我尝试了一切。我从文档中复制粘贴了用于自定义标题的代码，但它不起作用。该标签生成一堆其他带有类（主要是引导类）的标签。我从 Chrome 的检查器中获取了标题的 css 路径，但我无法更改它。

标题/链接位于<button>标签中，即使我说它button { color: red !important; }不起作用。我尝试了一切，但它不起作用。

提前致谢！

Answer 1

accordion-group {
  ::ng-deep {
    div {
      &>div.panel-heading.card-header.panel-enabled {
        background-color: rgba(52, 58, 64, 0.15); // change the background of every accordion heading

        .btn-link {
          color: rgb(6, 10, 9); // change the accordion heading buttons style
        }
      }

      &>div.panel-collapse.collapse.in.show>div {
        background-color: hsla(210, 10%, 83%, 0.10); // change the expanded content style
      }
    }
  }

}

::ng-deep{}- 这就是您如何更改来自导入库的组件的样式。

我给出的解决方案是用SASS（.scss文件）制作的。我不知道您是否可以在常规 CSS 中对 /deep/ 组件的样式进行更改。如果您的 Angular 项目配置了 CSS，您可以使用以下行将其更改为使用 SASS 语法：

ng config schematics.@schematics/angular:component.style scss