为什么我能'；t通过CSS将素描orderlist组件的背景颜色更改为我的Angular应用程序？

我在我的项目中使用了一个角度应用程序，我发现试图覆盖一个启动组件的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>

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

---

有什么不对劲吗？我错过了什么？如何解决此问题？

只要模板中没有此类：

“.ui orderlist.ui orderlist.ui orderlist.ui orderlist.ui orderlist item.ui state highlight”

，就无法从模板组件.css访问它们

在这种情况下，您需要一个全局/主题css文件，该文件覆盖来自PrimeNG的样式

或者您可以使用已弃用的选择器

：：ng deep

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

---

它工作使用去种族化选择器，但我不明白。。。1） 为什么我在模板中没有这个类？我可以用Chrome开发者工具看到它…所以我不明白为什么没有应用这个样式…我缺少什么？2） 这到底是什么：主机和：：ng深度选择器？为什么不赞成？3） 什么是不使用这些不推荐的选择器的替代解决方案？1）开发工具显示呈现的HTML，但您使用的类位于另一个由Prime创建的组件中，并且它们也包含在内，这就是您无法在组件中访问的原因。2） ：host是当前组件样式的选择器，使用with deep不会弄乱其他组件样式。3） 据我所知，除了：：deep选择器，仍然没有其他选择

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