如何覆盖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>

Answer 2

尝试使用

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

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

Answer 3

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

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

Answer 4

我知道的唯一方法是使用 :host 和 ::ng-deep，称为“阴影穿透 CSS 组合器”

您可以启用 ViewEncapsulation.Native 以使用 Shadow DOM，但我的理解是它尚未得到广泛支持。 Chrome 和 Safari 都支持它，我认为 Firefox 可能在那里，但 IE 距离添加该功能还有一段距离。

关于角度视图封装的好文章here，还有一篇关于阴影穿孔的好文章here。你也可以从 Angular 团队here查看文档。

在我的应用程序中，我也使用 PrimeNG。由于我将一个 primeNG 组件导入其中，我们将其称为 MyComponent，这意味着应用于 MyComponent 的样式将被封装，并且不会应用于我合并的 primeNG UI 元素。 Shadow piercing 组合器允许我“穿透”Angular 的“模拟”Shadow DOM 来设置 PrimeNG 的样式，但它看起来有点凌乱且不理想。我一直在寻找解决此问题的方法，但我什么都不知道。

Answer 5

您希望将组件包装在具有特定类的 div 中。

<div class="myOverride">

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

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

这种方式只有被包装的组件才会被样式化。

Answer 6

每个组件都提供了一组样式类，使用它们可以修改样式，例如

 <p-dropdown [options]="cities" [(ngModel)]="selectedCity"></p-dropdown>

而对应的样式会为

.ui-dropdown    {
  background-color:black;
}
.ui-dropdown-label  {
  color:white;
}

.ui-dropdown-label:hover{
  color:red
}
.ui-dropdown-item   {
  color:white;
  background-color:black;
}

LIVE DEMO