什么是覆盖primeng组件样式的最佳方法？

Question

我想根据组件级别而不是整个应用程序来改变primeng组件的样式,要么我必须更改主theme.css文件或内联样式中的样式,但似乎内联有时不能按预期工作让我们假设作为示例我必须使用

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

我必须ui-dropdown-item根据文档更改类类名称的样式.

我需要相同的组件与两个差异风格什么是最好的approcah相同？如果有人有工作的例子请添加链接.

Answer 1

尝试使用

:host >>> .ui-dropdown-item {...}

您不需要任何包围的div或将样式添加到main style.css.

Answer 2

因为>>>弃用必须使用::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>

Answer 3

禁用组件中的视图封装,然后添加样式,

@Component({
 selector: 'new-employee-flow',
 templateUrl: './app/components/my.html',
 styleUrls: ['./app/components/my.css'],
 encapsulation: ViewEncapsulation.None
})

Answer 4

您想将组件包装在具有某些特定类的 div 中。

<div class="myOverride">

现在在你的 style.css 中，你以这种方式定位 Primeng 组件：

.myOverride .ui-dropdown-item {...} 

这样，只有包装的组件会被设置样式。

Answer 5

我所知道的唯一方法就是使用:host和:: ng-deep,称为"阴影穿孔CSS组合器"

您可以启用ViewEncapsulation.Native来使用Shadow DOM,但我的理解是它还没有被广泛支持.Chrome和Safari支持它,我认为Firefox可能会在那里,但IE仍然可以添加该功能.

关于查看封装在角好文章在这里,和良好的一篇关于阴影直刺这里.您还可以在此处查看Angular团队的相关文档

在我的应用程序中我也使用PrimeNG.由于我将一个primeNG组件导入,我们称之为MyComponent,这意味着应用于MyComponent的样式将被封装,并且不会应用于我合并的primeNG UI元素.暗影穿孔组合器允许我"穿透"Angular的"模拟"暗影DOM来设计PrimeNG的样式,但它似乎有点凌乱而且不理想.我已经找到了解决方法,但我什么都不知道.