I've encountered an issue with my Angular 2 component that utilizes an accordion from ng-bootstrap. While the functionality works perfectly, I'm facing a problem with applying custom styles using the .card, .card-header, and .card-block classes on the accordion elements generated by ng-bootstrap.
These classes are directly set by ng-bootstrap when transforming the accordion into divs.
To apply my own CSS styles, I link a styles.scss file to the component's TypeScript file. However, despite my efforts, the styles don't seem to get applied to the elements, as seen in the rendered HTML output.
<style>
[_nghost-xfh-23] .card[_ngcontent-xfh-23] {
border: none; }
[_nghost-xfh-23] .card-header[_ngcontent-xfh-23] {
margin-top: 0.75em !important;
border: 1px solid rgba(0, 0, 0, 0.125); }
[_nghost-xfh-23] .card-block[_ngcontent-xfh-23] {
text-align: left; }
</style>
The styles.scss code snippet is as follows:
:host .card {
border: none;
}
:host .card-header {
margin-top: 0.75em !important;
border: 1px solid rgba(0, 0, 0, 0.125);
}
:host .card-block {
text-align: left;
}
It seems like Angular 2 tries to apply the styles during compilation, but the divs with the specified classes are created afterwards, preventing the styles from being applied.
Unfortunately, I am unable to edit bootstrap.css directly or create another global CSS file. I'm seeking a solution to reapply the CSS styles after the component loads or any alternative method to style ng-bootstrap accordions effectively.
If you have any insights or solutions to my dilemma, please share. Thanks! Best regards, Sy