Angular-UI的accordion有一个accordionHeading指令，允许您包含HTML。源代码中的示例：

// Use accordion-heading below an accordion-group to provide a heading containing HTML
// <accordion-group>
//   <accordion-heading>Heading containing HTML - <img src="..."></accordion-heading>
// </accordion-group>

因此，也许您可以这样做，有条件地应用您的自定义css：

<accordion-group>
<accordion-heading ng-class="{'custom-style': item.title }"> Your Title </accordion-heading>
</accordion-group>

下面是Angular-UI可折叠面板的源代码https://github.com/angular-ui/bootstrap/blob/master/src/accordion/accordion.js

我遇到了同样的问题，对我来说，快速的解决方案是更改CSS并在父“accordion-group”中添加一个类：

模板：

<accordion close-others="true">
    <accordion-group ng-repeat="elem in group.elements" is-open="isopen" ng-class="{'collapsed': !isopen}">
        <accordion-heading ng-click="isopen=!isopen">
            {{ elem.name }} 
        </accordion-heading>
        This content is straight in the template.
    </accordion-group>
</accordion>

HTML格式：

<accordion close-others="true">
    <div class="panel-group" ng-transclude="">
        <!-- ngRepeat: elem in group.elements -->
        <div class="panel panel-default ng-isolate-scope collapsed" ng-repeat="elem in group.elements" is-open="isopen" ng-class="{'collapsed': !isopen}">
            <div class="panel-heading">
                <h4 class="panel-title">
                <a href="" class="accordion-toggle" ng-click="toggleOpen()" accordion-transclude="heading">
                    <span class="ng-binding ng-scope"> 2001 </span></a>
                </h4>
            </div>
            <div class="panel-collapse collapse" collapse="!isOpen" style="height: 0px;">
                <div class="panel-body" ng-transclude="">
                    <accordion-heading ng-click="isopen=!isopen" class="ng-scope"></accordion-heading>
                    <span class="ng-scope">
                        This content is straight in the template.
                    </span>
                </div>
            </div>
        </div>
    </div>
</accordion>

CSS格式：

accordion>.panel-group .panel.collapsed .panel-heading .accordion-toggle {
    color: #478fca;
    font-weight: 400;
    background-color: #F9F9F9;
}

您也可以创建一个指令来更改子级的类，但我认为这不是最好的解决方案。

刚刚处理了这个问题后，升级到最新版本的Angular ，引导程序等，这些相关的答案都没有完全回答这个问题imo。
我的经验是有两种主要的方法
1.然后替换可折叠组件及其子组件中的现有样式。
这种方式比较挑剔，可能需要更多的试验和错误来配置到您想要的规格。
HTML格式：

<accordion>
    <accordion-group heading="test" [panelClass]="'custom-class'"></accordion-group>
    <accordion-group heading="test2" [panelClass]="'custom-class'"></accordion-group>
</accordion>

• 注意[panelClass] - Angular中额外的一组引号，否则会查找预置。您可以通过初始化一个包含所需自定义类名称的字符串变量并将其弹出来解决此问题。*

可能的CSS（可能不精确）：

accordion-group::ng-deep .custom-class>a{background-color: black !important;}
accordion-group::ng-deep .custom-class>a:hover{color:white !important;}

1.追踪组件使用的特定类（你的浏览器的开发工具很有用），并根据需要使用常用的css规范（：：ng-deep，！important，'〉'等）。例如，在折叠组中，每组的标题使用.btn，.btn-link等。
例如，如果要将折叠组标题中的默认下划线更改为仅在（悬停）事件上显示：
HTML格式：

<accordion>
    <accordion-group heading="test" id="blah"></accordion-group>
    <accordion-group heading="test2"></accordion-group>
</accordion>

CSS：

#blah .btn{text-decoration: none;}
#blah .btn:hover{text-decoration: underline;}

我发现方法#2更简单，它只需要对您使用的组件进行一点调查（可能不是一件坏事）。