这个 PrimeNG 元素从哪里获得它的颜色以及如何更改它？

Question

我正在开发一个 Angular 17 项目，使用 Clarity 和 PrimeNG 库进行样式设计。我已在我的 angular.json 中包含以下 css 文件：

• “node_modules/primeng/resources/themes/mdc-dark-indigo/theme.css”，
• “node_modules/primeng/resources/primeng.min.css”，

该风格有效，但我需要稍微调整它以符合产品其余部分的风格。 我正在使用基本的 PrimeNG TabView 组件：

<div class="recipe">
  <div class="tabs">
    <p-tabView>
      <p-tabPanel header="Settings">
          <ng-template pTemplate="header">
              <div class="expanded-click-area" routerLink="settings">
                  <fa-icon [icon]="faCog"></fa-icon>
                  Settings
              </div>
          </ng-template>
      </p-tabPanel>
      <p-tabPanel header="Phases">
          <ng-template pTemplate="header">
              <div class="expanded-click-area" (click)="navigateToRoute('phases')">
                  <fa-icon [icon]="faTasks"></fa-icon>
                  Phases
              </div>
          </ng-template>
      </p-tabPanel>
      <p-tabPanel header="Overview">
          <ng-template pTemplate="header">
              <div class="expanded-click-area" (click)="navigateToRoute('overview')">
                  <fa-icon [icon]="faPieChart"></fa-icon>
                  Overview
              </div>
          </ng-template>
      </p-tabPanel>
    </p-tabView>

  </div>
  <div class="content">
    <router-outlet></router-outlet>
  </div>
</div>

我特别想用颜色 #9FA8DA 更改底部边框，如此打印屏幕所示：

在我的开发工具中，我已经关闭了所有带有边框的内容，但它没有改变任何东西，我还在node_modules/primeng/resources/themes/mdc-dark-indigo/theme.css中用白色替换了#9FA8DA的所有183个实例，并发现在node_modules/primeng/resources/primeng.min.css 中没有可替换的内容。即使在重建页面后，这现在也改变了元素的颜色。

这个 PrimeNG 元素从哪里获取颜色以及如何更改它？

Answer 1

不要修改现有的主题，这看起来很乏味，而是查看自定义主题的文档

Primeng 自定义主题

主题是使用

primeng-sass-theme

创建的，请检查一下，希望它能解决您的问题！