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

user_7622597 0
Viewed 2480

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!

ngx-bootstrap bootstrap-4 angular typescript css
2 Answers
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
user_76225970

You can provide some custom CSS class to the accordion using the panelClass property.

Example

    <accordion>
      <accordion-group heading="Static Header, initially expanded"
                       [panelClass]="customClass"
                       [isOpen]="isFirstOpen">
        This content is straight in the template.
      </accordion-group>
      <accordion-group heading="Content 1">
        <p>accordion 1</p>
      </accordion-group>
      <accordion-group heading="Content 2" panelClass="customClass">
        <p>accordion 2</p>
      </accordion-group>
    </accordion>

Then you need to set the css rules in the global style sheet in you project.

style.css

.card.customClass, .card.customClass .card-header, .panel.customClass {
    background-color: #5bc0de;
    color: #fff;
}

For more information visit the ngx-bootstrap documentation (Accordion Styling).

user_71492350
Related