私はアプリケーション全体ではなく、コンポーネントレベルでprimengコンポーネントのスタイルを真っ暗にしたいのですが、メインのスタイルを変更する必要がありますtheme.cssファイルまたはインラインスタイルですが、インラインのように見えない場合があります。primengコンポーネントのスタイルを無効にする最も良い方法は何ですか？
<p-dropdown [options]="cities" formControlName="selectedCity"></p-dropdown>
を使用して、私は、ドキュメントごとにクラスui-dropdown-itemクラス名のスタイルを変更する必要があります。
私は2つのdiffスタイルで同じコンポーネントを必要としますが、同じものに対して最も良いapprocahは何ですか？ 実例を持っている人なら誰でもリンクを追加してください。
div内のコンポーネントを特定のクラスでラップしたいとします。
.myOverride .ui-dropdown-item {...}
この方法でのみ包まれたコンポーネントはスタイルを取得します：
<div class="myOverride">
無効にビューコンポーネントでカプセル化して、スタイルを追加、
@Component({
selector: 'new-employee-flow',
templateUrl: './app/components/my.html',
styleUrls: ['./app/components/my.css'],
encapsulation: ViewEncapsulation.None
})
を使用して解決しました。使用するたびに各コンポーネントをスタイルする必要があります。これは長すぎて適切なプロセスではありません。 –
溶液として濃すぎる –
私が使っているのを認識だとこれを行うための唯一の方法：と呼ばれるNG-深いホストとの::、 "シャドウピアスCSSコンビネータ"
Shadow DOMを使用するにはViewEncapsulation.Nativeを有効にできますが、その理解はまだ広くサポートされていません。 ChromeとSafariはそれをサポートしていますが、Firefoxはそこにあるかもしれませんが、IEはまだ機能を追加することから離れています。
角度表示hereでの表示カプセル化についての良い記事、シャドウピアスについての良い投稿hereまた、Angularチームからドキュメントを見ることもできます。here
私のアプリケーションでは、PrimeNGも使用しています。私はprimeNGコンポーネントをインポートしているので、MyComponentと呼ぶことができます。これは、MyComponentに適用されたスタイルがカプセル化され、imの組み込み要素に適用されないことを意味します。 Shadow Piercingコンビネータを使用すると、Angularの「エミュレート」されたShadow DOMを使ってPrimeNGのスタイルを調整することができますが、ちょっと乱雑で理想的ではないようです。私はこれを回避する方法を探しましたが、何も認識していません。
すべてのコンポーネントがインスタンス
<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;
}
お試しください
：ホスト>>> .ui-dropdown-item {...}
あなたは囲まれたdivを必要とせず、メインスタイルにスタイルを追加する必要もありません。css
まず最初にお返事ありがとうございます。実際にはこれもうまくいかないのですが、これは他のオプションも同じですか？ –
AngularはエミュレートされたViewEncapsulationを使用するようになったため、このメソッドは、実行時にコンポーネントが要素を生成する場合を含め、場合によっては機能しません。私は：hostと/ deep/selectorsを使ってこの問題を解決しました。 ：hostはコンポーネントのルート要素を選択し、/ deep /はすべての子要素に子セレクタを適用します。詳細：ホストとディープ/ここ： https://angular.io/docs/ts/latest/guide/component-styles.html#!#special-selectors これは実際にはどのように見えるのですかコンポーネントの.scssファイルの親セレクタにhost：/ deep /を追加します。 – jmcmichael
@jmcmichael私はカスタムコンポーネント内の定義済みコンポーネントのスタイルをオーバーライドしようとしています。また、あなたが指摘したように、あらかじめ定義されたコンポーネントは実行時に要素を生成しています。コンポーネントからこれらの要素のスタイルをオーバーライドするにはどうすればよいですか？ – Nitesh