web-dev-qa-db-ja.com

外部コンポーネントのカプセル化されたCSSのオーバーライド

外部コンポーネントのカプセル化されたCSSをオーバーライドする方法を疑問に思っていました。

したがって、プロジェクトで material2 を使用しており、tabsコンポーネントの属性オーバーフローはtab-bodyに設定されています。オーバーフロー値をオーバーライドすることは可能ですか？

cssangularangular-material
10
Salma Hamed

特別なcss /deep/命令を使用できます。 ドキュメントを参照

だから、あなたが持っている場合

app
  sub-component
    target-component
      <div class="target-class">...</div>

アプリにCSS（またはそれ以下）を入れることができます：

/deep/ .target-class {
  width: 20px;
  background: #ff0000;
}

もちろん、このcssフラグメントをsub-componentに入れることもできます。

23
Meir

この記事から

コンポーネントのスタイルは十分に分離されていますが、必要に応じて簡単にオーバーライドできます。そのためには、ページの本文に属性を追加するだけです。

_<body override>
    <app></app>
</body>
_

属性の名前は何でもかまいません。値は不要であり、名前のオーバーライドにより、使用目的が明確になります。コンポーネントのスタイルをオーバーライドするには、次を実行できます。

_[override] hello-world h1 {
    color:red;
}
_

ここで、overrideは属性、hello-worldはターゲットコンポーネント、h1はスタイルを変更しようとしているものです。 （これを正しく行うか、それは動作しません）。

コンポーネント_hello-world_は

_selector: 'hello-world',
styles: [`
   h1 {
      color: blue;
   }
`],
template: ` <h1>Hello world</h1> `
_

これが最もエレガントな方法だと思います。

あるいは、何らかのライブラリを構築している場合、cssで次のような空想的な操作を行うことで、スタイルを完全にリセットできます。

:Host-context(.custom-styles) { //.. css here will only apply when there is a css class custom-styles in any parent elem }

コンポーネントを使用するには、使用します

_<hello-world class="custom-styles">_

しかし、これは最初のオプションよりもずっと不便です。

2
Ced

外部コンポーネントによってタブに適用されているクラスを確認するだけです（インスペクターまたは他のツールを使用します）。スタイルcssファイルで、タブに同じクラス名を追加し、！importantを追加すると同時にoverflowプロパティを設定して、前のクラスを上書きするようにします。また、ページへのcssリンクが外部コンポーネントcssリンクの後に追加されていることを確認してください。

お役に立てれば。

1
Nasir T