Style of accordion-groups' headers (ngx-bootstrap)?

Issue

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!

Solution

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 [email protected]/angular:component.style scss

Answered By – Nikolai

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0