使用 css 样式化 ng-bootstrap 手风琴

Posted 2023-03-06

【中文标题】使用 css 样式化 ng-bootstrap 手风琴

【英文标题】：Style ng-bootstrap accordion with css

【发布时间】：2017-05-31 12:59:45

【问题描述】：

我有一个带有手风琴的 Angular 2 组件，我使用 ng-bootstrap 添加了它。一切功能正常，但是我尝试使用已编译的手风琴元素所具有的.card, .card-header, .card-block 类加载的样式，这些样式根本不会应用于元素。

在将手风琴转换为 div 时，这些类由 ng-bootstrap 直接设置。

我通过链接到组件 TypeScript 文件的 styles.scss 文件应用我自己的 css。渲染完所有内容后，我的样式会出现在 html 输出标题中的 <style></style> 标记中。 看起来像这样。

    <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>

styles.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 手风琴的样式。

希望我的问题有意义， 问候 sy

【问题讨论】：

这些类的css是什么？你如何添加这些类？你如何实现样式？我们需要更多信息来帮助您。

@DomeTune 让它更详细一点，希望对您有所帮助。

这听起来像你遇到了影子 DOM。 developer.mozilla.org/en-US/docs/Web/Web_Components/Shadow_DOM 如果您将 :deep: 或 >>> 添加到您的 css 规则中

【参考方案1】：

正如@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

【讨论】：

我遇到了类似的问题，但我想更改一些卡片的样式，而不是全部，因为我使用的是嵌套手风琴并且想要卡片的不同样式。我已将.inner-accordion 类应用于手风琴，并希望修改.card 类的样式，该类位于inner-accordion 类中。关于如何实现这一点的任何意见？

搞定了。它会像下面这样工作：.inner-accordion ::ng-deep .card