angular - 如何覆盖 primeng 组件的样式？

Question

我想根据组件级别而不是整个应用程序覆盖 primeng 组件的样式。我必须更改主 theme.css 文件中的样式或内联样式，但有时内联似乎无法按预期工作。例如，我必须使用

<p-dropdown [options]="cities" formControlName="selectedCity"></p-dropdown>

而且我必须根据文档更改类 ui-dropdown-item 类名的样式。

我需要具有两种差异样式的相同组件，执行此操作的正确方法是什么？

Answer 1

由于 >>> 已弃用，因此必须使用 ::ng-deep 代替。使用 material2 v6 和 primeng v5.2.*

:host {
    ::ng-deep .prime-slider-override {
        background-color: #26A3D1;
        background-image:none;
        border:none;
        color:white;

        .ui-slider-range {
            background: red;
        }
    }    
}

<p-slider [(ngModel)]="rangeValues"
              styleClass="prime-slider-override"></p-slider>