How can I customize a bootstrap class (btn-link), if I don't have an access to the tag (button)?

Question

I have a button generated by a library (ngx-bootstrap accordion component) and I don't have an access to it (it generates it after compilation or whatever it is, in other words I don't have access to it in my html file). When I inspect the element through the Chrome's Inspector I can add for example color: red; but when I copy the CSS path to change it through a .css file it does not change it. It has a btn-link class and I want to access it through .accordion-toggle>btn-link { color: red; }, but it does not change.

I suppose I can add a custom class to all elements matching .accordion-toggle>btn-link for example .my-custom-class with typescript/javascript and then I can apply my changes on my custom class.

Is this the only way to "override" Bootstrap?

Answer 1

accordion-group {
  ::ng-deep {
    div {
      &>div.panel-heading.card-header.panel-enabled.btn-link {
          color: rgb(6, 10, 9); // this is how
      }
    }
  }
}

I found that ::ng-deep in Angular (there is one in VueJS and something similar in React) does this thing - accesing the "dynamically generated" html, which is just generated by other components and ng-deep access them. It can't be done in CSS, because of the block nesting - it should be for example SASS file.