accordion-groups' headers (ngx-bootstrap) 的样式？

Question

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

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

heading/link 在 <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

Answer 2

您可以使用 panelClass 属性.

为手风琴提供一些自定义 CSS class

示例

    <accordion>
      <accordion-group heading="Static Header, initially expanded"
                       [panelClass]="customClass"
                       [isOpen]="isFirstOpen">
        This content is straight in the template.
      </accordion-group>
      <accordion-group heading="Content 1">
        <p>accordion 1</p>
      </accordion-group>
      <accordion-group heading="Content 2" panelClass="customClass">
        <p>accordion 2</p>
      </accordion-group>
    </accordion>

然后你需要在你项目的全局样式sheet中设置css规则。

style.css

.card.customClass, .card.customClass .card-header, .panel.customClass {
    background-color: #5bc0de;
    color: #fff;
}

有关详细信息，请访问 ngx-bootstrap 文档 (Accordion Styling)。

accordion-groups' headers (ngx-bootstrap) 的样式？

Style of accordion-groups' headers (ngx-bootstrap)?

css

typescript

bootstrap-4

ngx-bootstrap

angular