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

Posted 2023-03-13

【中文标题】手风琴组标题的样式（ngx-bootstrap）？

【英文标题】：Style of accordion-groups' headers (ngx-bootstrap)?

【发布时间】：2020-09-19 16:13:28

【问题描述】：

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

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

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

提前致谢！

【问题讨论】：

您是否在引导程序之后或之前链接了样式表，因为这很重要？

感谢您的回复。我其实不知道，对不起。我在装饰器中使用了 Angular 的 styleUrls 属性。当我从 Chrome 的检查器更改样式时，它可以工作，所以问题可能是您所指的问题 - 引导程序“覆盖”了我的样式。

【参考方案1】：

您可以使用 panelClass 属性为手风琴提供一些自定义 CSS 类。

例子

    <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>

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

style.css

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

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

【参考方案2】：

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