How do I change the style of the accordion headers in ngx-bootstrap?
I tried everything. I copy pasted the code from the documentation for customizing the headers but it does not work. The tag generates a bunch of other tags with classes (mostly bootstrap classes). I get the css path to the heading from the Chrome's Inspector, but I can't change it.
The heading/link is in a <button>
tag and even when I say button { color: red !important; }
it does not work.
I tried everything, but it does not work.
Thanks in advance!
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{}
- that's how you can change the styles of the component that comes from imported library.
The solution I gave is made with SASS (.scss file). I don't know if you can apply changes to the /deep/ components' styles in a regular CSS. If your Angular project is configurated with CSS you can change it to use SASS syntax with the following line:
ng config schematics.@schematics/angular:component.style scss