如何覆蓋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 距離添加該功能還有很長的路要走。

關於查看封裝在角好文章在這里，和良好的一篇關於陰影直刺這里。 您還可以在此處查看來自 Angular 團隊的文檔

在我的應用程序中，我也使用 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;
}

現場演示

Answer 7

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

Answer 8

我們可以使用以下代碼覆蓋 PrimenNg 組件的樣式。

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

這僅適用於內聯樣式。 在上述情況下，我將自動完成下拉菜單的寬度更改為 285px。 它對我有用。