Question

我在我的一个项目中使用NgbAccordion并需要自定义文本颜色属性，但无法这样做。我已经写了css，但它不会以任何方式影响手风琴。您可以看到我的代码here

此外，我遇到了this用户提到无法自定义ngbAccordion，我仍然想知道是否有人想出这个问题。如果不是，我可以使用的其他方法，而不是bootstrap手风琴，由于某些项目特定的原因，不允许在项目中使用jquery和popper js，这就是原因。

Answer 1

在我上面提到的github问题链接中，在同一个线程中我发现了这个解决方案并且它有效。使用以下css：

::ng-deep .card {
  margin-bottom: 20px;
}

::ng-deep .card .card-header.active > a > span {
  color: #1d2124;
}

还更新了stackblitz代码

Answer 2

你可以这样做

 <ng-template ngbPanelTitle>
          <div class="card title"><span class="steps">1</span>
            Step 1</div>
        </ng-template>
        <ng-template ngbPanelContent>
 <span class="content">  
          Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia
          aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor,
          sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica,
          craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings
          occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus
          labore sustainable VHS.
</span>
        </ng-template>

和css

.title {
      background:#ccc;
       height:30px;
      color:#000;
    }
       .steps {
                  display: inline-block;
                  box-sizing: border-box;
                  width: 20px;
                  height: 20px;
                  border-radius: 50%;
                  border: 1px solid #000;
                  text-align: center;
                  margin-right: 10px;
                  color: #202A36;
            }
            .card {
              margin-bottom: 10px;
            }
            .content {
              color: #1b8cd3;
}

这是为标题提供背景颜色，就像您可以使用其他样式属性一样

定制ngbAccordion

2 个答案: