如果我无法访问标签（按钮），如何自定义 bootstrap class (btn-link)？

Question

我有一个由库（ngx-bootstrap 手风琴组件）生成的按钮，但我无权访问它（它是在编译后生成的，或者它是什么，换句话说，我不知道在我的 html 文件中无法访问它）。当我通过 Chrome 的检查器检查元素时，我可以添加例如颜色：红色；但是当我复制 CSS 路径以通过 .css 文件更改它时，它不会更改它。它有一个 btn-link class 我想通过 .accordion-toggle>btn-link { color: red; }，但它不会改变。

我想我可以向所有匹配 .accordion-toggle>btn-link 的元素添加自定义 class 例如 .my-custom-class 和 typescript/javascript 然后我可以在我的自定义 class 上应用我的更改。

这是"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
      }
    }
  }
}

我发现 Angular 中的 ::ng-deep（VueJS 中有一个，React 中有类似的东西）做这件事 - 访问 "dynamically generated" html，这是刚刚由其他组件生成并 ng-deep 访问它们。它不能在 CSS 中完成，因为块嵌套 - 它应该是例如 SASS 文件。

Answer 2

我和你一样困惑，想方设法从 heading 属性的 heading 属性生成的按钮中覆盖或删除 btn-link class 13=]元素.

我最终发现我可以通过不使用 heading 属性来绕过它。相反，我使用了在面板中使用自定义 HTML 的功能。这是我在我的案例中所做的：

<accordion-group [isOpen]="openAccordion==2">
   <span accordion-heading>Claim Submission Result</span>
   <p>Some content</p>
</accordion-group>

这只是普通的旧文本，这正是我想要的。

如果我无法访问标签（按钮），如何自定义 bootstrap class (btn-link)？

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

accordion

typescript

ngx-bootstrap

angular