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

Question

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

我尽力了。我从文档中复制了粘贴的代码以自定义标题，但是它不起作用。标签会生成一堆带有类（主要是引导类）的其他标签。我从Chrome的Inspector获取了指向标题的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