Question

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

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

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

我需要具有两种差异风格的相同组件，同样的最佳approcah是什么？如果有人有工作示例请添加链接。

Answer 1

尝试使用

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

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

Answer 2

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

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

Answer 3

自>>>被弃用以来，必须改为使用::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 4

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

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

关于角度here中的视图封装的好文章，以及关于阴影穿孔here的好帖子。您还可以从Angular团队here

查看相关文档

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

Answer 5

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

<div class="myOverride">

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

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

这样只有被包装的组件才会被设计样式。

Answer 6

<p-menubar [model]="items" [style]="{'background-color': 'red'}">
</p-menubar>

Answer 7

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

 <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

Answer 8

我们可以使用以下代码覆盖 PrimenNg 组件的样式。

[style]="{'width':'285px'}" [inputStyle]="{'width':'285px'}"

这仅适用于内联样式。在上述情况下，我将自动完成下拉菜单的宽度更改为 285px。它对我有用。

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

8 个答案: