如何自定义NgbAccordion文本颜色？求无jQuery/Popper.js的替代方案

一、修复自定义CSS不生效的问题 #

NgbAccordion作为Angular第三方组件，默认受Angular视图封装（ViewEncapsulation）影响，你的自定义样式无法穿透到组件内部元素。这里有几个可靠的解决办法：

1. 使用::ng-deep穿透样式（推荐结合:host避免全局污染）

在组件的CSS文件中，通过:host ::ng-deep来定位NgbAccordion的内部类，这样样式只会作用在当前组件内的NgbAccordion，不会污染全局：

/* 修改折叠按钮（标题）的默认颜色 */
:host ::ng-deep .accordion-button {
  color: #2c3e50;
}

/* 修改按钮展开时的颜色和背景 */
:host ::ng-deep .accordion-button:not(.collapsed) {
  color: #e74c3c;
  background-color: #fef5f5;
}

/* 修改面板内容的文本颜色 */
:host ::ng-deep .accordion-body {
  color: #7f8c8d;
}

2. 自定义标题模板（更优雅的方式）

NgbAccordion支持通过ng-template ngbPanelTitle自定义标题内容，这样你可以直接给自己的元素添加类名，无需穿透样式：

<ngb-accordion>
  <ngb-panel>
    <ng-template ngbPanelTitle>
      <span class="custom-panel-title">我的自定义标题</span>
    </ng-template>
    <ng-template ngbPanelContent>
      这是面板的内容，样式也可以直接自定义
    </ng-template>
  </ngb-panel>
</ngb-accordion>

然后在CSS中直接写：

.custom-panel-title {
  color: #3498db;
  font-weight: 600;
}

3. 将样式放到全局styles.css

如果你的样式需要全局生效，可以直接把CSS代码放到项目根目录的styles.css里，这样会覆盖NgbAccordion的默认样式，但要注意避免和其他组件样式冲突。

二、如果不想用NgbAccordion：无依赖替代方案 #

由于你不能使用jQuery和Popper.js，自己手写一个Angular折叠面板组件是最灵活的选择，完全可控且无任何第三方依赖。下面是一个简单的实现示例：

组件HTML（custom-accordion.component.html）

<div class="custom-accordion">
  <div class="accordion-item" *ngFor="let panel of panels">
    <div 
      class="accordion-header" 
      (click)="panel.isExpanded = !panel.isExpanded"
    >
      {{ panel.title }}
      <span class="expand-icon">{{ panel.isExpanded ? '▼' : '▶' }}</span>
    </div>
    <div class="accordion-content" *ngIf="panel.isExpanded">
      {{ panel.content }}
    </div>
  </div>
</div>

组件TS（custom-accordion.component.ts）

import { Component } from '@angular/core';

interface AccordionPanel {
  title: string;
  content: string;
  isExpanded: boolean;
}

@Component({
  selector: 'app-custom-accordion',
  templateUrl: './custom-accordion.component.html',
  styleUrls: ['./custom-accordion.component.css']
})
export class CustomAccordionComponent {
  panels: AccordionPanel[] = [
    {
      title: '面板1',
      content: '这是面板1的内容，样式可以完全自定义',
      isExpanded: false
    },
    {
      title: '面板2',
      content: '这是面板2的内容，想改什么颜色都可以',
      isExpanded: false
    }
  ];
}

组件CSS（custom-accordion.component.css）

.custom-accordion {
  border-radius: 8px;
  border: 1px solid #e0e0e0;
  overflow: hidden;
}

.accordion-item {
  border-bottom: 1px solid #e0e0e0;
}

.accordion-item:last-child {
  border-bottom: none;
}

.accordion-header {
  padding: 1rem 1.5rem;
  background-color: #f5f5f5;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #333; /* 自定义标题颜色 */
  transition: background-color 0.2s;
}

.accordion-header:hover {
  background-color: #eeeeee;
}

.expand-icon {
  font-size: 0.8rem;
  color: #666;
}

.accordion-content {
  padding: 1rem 1.5rem;
  color: #555; /* 自定义内容颜色 */
  background-color: #fff;
}

这个组件可以根据你的需求随意修改样式，比如调整颜色、间距、动画效果等，完全符合你的项目限制。

内容的提问来源于stack exchange，提问作者Bijay Singh