为什么我无法通过 CSS 将 PrimeNG 订单列表组件的背景颜色更改为我的 Angular 应用程序？

Question

我在 Angular 应用程序上使用 PrimeNG 到我的项目中，我发现在尝试覆盖 PrimeNG 组件的 CSS 时遇到了一些困难。

特别是我有一个这样的订单列表：

如您所见，所选项目的默认背景色为蓝色。我正在尝试将其更改为灰色，但它不起作用。

这是我的整个组件视图的 HTML 代码：

<p-selectButton [options]="workShiftTypes" [(ngModel)]="selectedShift" optionLabel="name"></p-selectButton>
<p>Selected Work Shift: {{selectedShift ? selectedShift.value : 'none'}}</p>

<div class="custom_sift" *ngIf="selectedShift.value == 'custom'">
  <app-custom-event-date-selector
                (notifyStartEndTime)="onChangeCustomShiftDate($event)">
  </app-custom-event-date-selector>
</div>

<div #draggable_people>

  <p-orderList [value]="people" [listStyle]="{'height':'400px'}" header="People"
    filter="filter" filterBy="name" filterPlaceholder="Filter by name" dragdrop="true">
    <ng-template let-person pTemplate="item">
        <div class="ui-helper-clearfix fc-event" style="background-color: transparent; color:black !important;border: 0px !important;">
          <div class="container">
            <div class="row">
              <div class="col-sm">
                <img src="assets/img/people/person-icon.png" style="display:inline-block;float: left; margin:2px 20px 2px 2px" width="48">
                <div style="font-size:14px;margin:15px 5px 0 0">{{person.name}}</div>
              </div>
              <div class="col-sm">
                <div class="people-operations-icons">
                  <button class="btn" (click)="onClickFilter(person, $event)">
                    <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-funnel-fill" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                      <path fill-rule="evenodd" d="M1.5 1.5A.5.5 0 0 1 2 1h12a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-.128.334L10 8.692V13.5a.5.5 0 0 1-.342.474l-3 1A.5.5 0 0 1 6 14.5V8.692L1.628 3.834A.5.5 0 0 1 1.5 3.5v-2z"/>
                    </svg>
                  </button>
                </div>
              </div>
            </div>
          </div>


        </div>
    </ng-template>
  </p-orderList>
</div>

列表在此标签内呈现：

Chrome 开发者工具显示：

因此进入我的组件 CSS 文件（已正确导入我的组件 .ts class）我输入：

body .ui-orderlist .ui-orderlist-list .ui-orderlist-item.ui-state-highlight { background-color: grey !important; }

覆盖 theme.css 文件中定义的默认蓝色。但它不起作用。选择一个项目它仍然是蓝色而不是灰色。

有什么问题吗？我错过了什么？我该如何解决这个问题？

Answer 1

只要您在模板中没有此类：".ui-orderlist .ui-orderlist-list .ui-orderlist-item.ui-state-highlight"，您就无法从模板访问它们-component.css

对于这种情况，您需要一个 global/theme css 文件来覆盖 PrimeNG 中的样式。

或者您可以使用 已弃用 选择器 ::ng-deep

:host ::ng-deep .ui-orderlist .ui-orderlist-list .ui-orderlist-item.ui-state-highlight {
  background-color: grey !important;
}

为什么我无法通过 CSS 将 PrimeNG 订单列表组件的背景颜色更改为我的 Angular 应用程序？

Why I can't change the background color of a PrimeNG orderlist component via CSS into my Angular application?

css

primeng

angular