Just dealt with this issue after upgrading to most recent versions of angular, bootstrap, etc. and I want to provide a more detailed answer.
My experience is that there's really two main ways to do it
- using the [panelClass] attribute and then supplanting the existing styling in the accordion component and its children.
This way is more finicky and will likely take a lot more trial and error to configure to your desired specs.
html:
<accordion>
<accordion-group heading="test" [panelClass]="'custom-class'"></accordion-group>
<accordion-group heading="test2" [panelClass]="'custom-class'"></accordion-group>
</accordion>
note the extra set of quotation marks in the [panelClass] - Angular looks for presets otherwise. You can get around this by initializing a string variable that contains the name of the custom class you desire and popping that in there, instead.
possible css (might not be precise):
accordion-group::ng-deep .custom-class>a{background-color: black !important;}
accordion-group::ng-deep .custom-class>a:hover{color:white !important;}
- Track down the specific classes the components utilize (your web browser's developer tools are useful) and use the usual css specs (::ng-deep, !important, '>', etc.), as necessary. In the accordion-group, for example, the headings for accordion-groups utilize .btn, .btn-link, etc.
E.g., if you wanted to change the default underlines in an accordion-group's heading to only display on the (hover) event:
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;}
I find method #2 to be simpler, it just requires a little investigation into the components you use (probably not a bad thing anyway).