时间戳

首页 > 解决方案 > 手风琴组的标题样式（ngx-bootstrap）？

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

问题描述

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

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

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

提前致谢！

标签： cssangulartypescriptbootstrap-4ngx-bootstrap

解决方案

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

推荐阅读