Recently, I encountered a similar issue post-upgrade to the latest versions of angular, bootstrap, etc., prompting me to provide a more thorough explanation.
In my experience, there are primarily two approaches to tackle this problem:
- Utilizing the [panelClass] attribute and customizing the styling within the accordion component and its sub-elements.
This method can be quite meticulous and may require significant experimentation to achieve the desired aesthetics.
html:
<accordion>
<accordion-group heading="test" [panelClass]="'custom-class'"></accordion-group>
<accordion-group heading="test2" [panelClass]="'custom-class'"></accordion-group>
</accordion>
Note the additional quotation marks in the [panelClass] - Angular expects presets by default. You can work around this by initializing a string variable containing your preferred custom class name for insertion.
Potential css (may require refinement):
accordion-group::ng-deep .custom-class>a{background-color: black !important;}
accordion-group::ng-deep .custom-class>a:hover{color:white !important;}
- Identify the specific classes utilized by the components (use your web browser's developer tools) and apply typical css techniques (::ng-deep, !important, '>', etc.), as needed. For instance, in the accordion-group, headings use classes like .btn, .btn-link, etc.
For example, if you wish to alter the default underlines in an accordion-group's heading to only appear on hover:
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 personally find method #2 to be simpler, requiring just a bit of exploration into the components you're using (which is probably beneficial anyway).