我有一个带有 Accordion 的 Angular 2 组件,我使用 ng-bootstrap 添加了它。一切正常,但我尝试使用 .card, .card-header, .card-block
加载的样式编译的 Accordion 元素具有的类,这些样式根本不会应用于元素。
在将 Accordion 转换为 div 时,这些类由 ng-bootstrap 直接设置。
我通过一个链接到组件 TypeScript 文件的 style.scss 文件应用我自己的 css。渲染完所有内容后,我的样式出现在 <style></style>
中。 html 输出标题中的标签。
它看起来像这样。
<style>
[_nghost-xfh-23] .card[_ngcontent-xfh-23] {
border: none; }
[_nghost-xfh-23] .card-header[_ngcontent-xfh-23] {
margin-top: 0.75em !important;
border: 1px solid rgba(0, 0, 0, 0.125); }
[_nghost-xfh-23] .card-block[_ngcontent-xfh-23] {
text-align: left; }
</style>
style.scss 看起来像这样:
:host .card {
border: none;
}
:host .card-header {
margin-top: 0.75em !important;
border: 1px solid rgba(0, 0, 0, 0.125);
}
:host .card-block {
text-align: left;
}
我的猜测是 Angular 2 正在尝试应用样式(在编译期间),但之后会使用上述类创建 div,从而无法将样式应用于元素。
我不敢直接编辑 bootstrap.css 或创建其他全局 css 文件。我希望有一种方法可以在加载组件后重新应用 css 样式,或者使用其他一些方法来设置 ng-bootstrap Accordion 的样式。
希望我的问题是有道理的,
问候
西
最佳答案
正如@ChristopherMoore 在他的评论中所说,这是由于 Shadow DOM 造成的问题。添加 /deep/
修复。这里是更新的功能代码。
/deep/ .card {
border: none;
}
/deep/ .card-header {
margin-top: 0.75em !important;
border: 1px solid rgba(0, 0, 0, 0.125);
}
/deep/ .card-block {
text-align: left
关于css - 使用 css 样式 ng-bootstrap Accordion ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41680623/