web-dev-qa-db-ja.com

Primengコンポーネントのスタイルをオーバーライドする最良の方法は何ですか？

私はアプリ全体ではなくコンポーネントレベルごとにプライミングコンポーネントのスタイルを明らかにしたい、メインtheme.cssファイルまたはインラインスタイルのスタイルを変更する必要がありますが、インラインが期待どおりに動作しないことがあります使用する必要があります

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

そして、ドキュメントに従ってクラスui-dropdown-itemクラス名のスタイルを変更する必要があります。

私は2つのdiffスタイルで同じコンポーネントが必要ですか？同じものに最適なapprocahは何ですか？実用的な例をお持ちの方は、リンクを追加してください。

angularprimeng
16
Pardeep Jain

使用してみてください

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

囲まれたdivやメインstyle.cssにスタイルを追加する必要はありません。

23
jcdsr

コンポーネントでビューのカプセル化を無効にしてからスタイルを追加し、

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

>>>は非推奨です::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>
9
RZ87

私が知っているこれを行う唯一の方法は、「Host and :: ng-deep」を使用することです。これは「シャドウピアスCSSコンビネーター」と呼ばれます

ViewEncapsulation.Nativeを有効にしてShadow DOMを使用できますが、私の理解はまだ広くサポートされていません。 ChromeとSafariがサポートしているので、Firefoxがあるかもしれませんが、IEはまだ機能を追加する方法から外れています。

View Encapsulation in angular here と、シャドウピアシングに関する良い記事 here の良い記事。 Angularチームからこれに関するドキュメントを表示することもできます here

私のアプリケーションでは、PrimeNGも使用しています。 primeNGコンポーネントをインポートするので、MyComponentと呼びましょう。これは、MyComponentに適用されるスタイルがカプセル化され、組み込むPrimeNG UI要素に適用されないことを意味します。シャドウピアスコンビネータを使用すると、Angularの「エミュレートされた」シャドウDOMを「ピアス」してPrimeNGのスタイルを設定できますが、少し面倒で理想的ではないようです。これを回避する方法を探しましたが、何も知りません。

6
Dave

特定のクラスを持つdivでコンポーネントをラップします。

<div class="myOverride">

ここで、style.cssで次の方法でprimengコンポーネントをターゲットにします。

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

この方法では、ラップされたコンポーネントのみがスタイル設定されます。

2
Alexander Ciesielski

すべてのコンポーネントにはスタイリングクラスのセットが用意されており、それらを使用してスタイルを変更できます。たとえば、

 <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

1
Aravind