問題タブ [angular2viewencapsulation]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
angular - angular-material2スタイルを上書きするには?
Material Design Componentsで Angular2 を使用しています。また、いくつかのスタイルを上書きしたいのですが、ViewEncapsulation のためにできないようです。
サードパーティ コンポーネントのViewEncapsulation (ViewEncapsulation.None) をオフにすることはできますか?
css - エミュレートされたビューのカプセル化 (CSS / Angular2) 内でグローバル セレクターを取得する方法
これを内部に含む Home コンポーネントがあります。
私のhome.style.scssの中には、これがあります：
背景色を緑に変更する必要がありますが、そうではありません。
上記の CSS コードは、次のスタイルを生成します。
最終的な HTML は次のようになります。
ここで何が問題なのかわかりませんが、セレクターが間違っていると思います。最終的なセレクターを次のようにしたいと思います。
それ以外の：
言い換えれば、なぜ _ngcontent-wjn-3 属性がないの<div class="alert">...</div>ですか?
多分私はすべてのことを間違っています。私が達成しようとしているのは、個々のブートストラップ コンポーネント (<alert>上記のコード内)のCSSをカスタマイズすることです。カスタム コンポーネント (<home>上記のコード内)。
ホーム コンポーネントでデフォルトのビュー カプセル化 (エミュレート) を使用しています。
どうすればそれができますか？
angular - angular コンポーネント内の外部コンポーネントに外部 CSS を適用する方法、またはネストされた外部コンポーネントのみに外部 CSS を使用する方法
私は初心者です。ここで使用されている用語は適切に適用されていない可能性があります。
私のアプリには 3 つのコンポーネントがあります。Project Clarityからの1 つの外部コンポーネントclr-datagrid
検索結果コンポーネントでは、
問題は、
ViewEncapsulation を使用する場合。Emulated、clarency-icons.min.css'、clarency-ui.min.css は、ネストされたコンポーネント/カスタム要素には適用されません。
ViewEncapsulation を使用する場合。ネイティブ、Chrome および Opera ブラウザでのみ正常に動作します。ただし、IE/Firefox/Safari にはありません。
ViewEncapsulation を使用する場合。None、正常に動作しますが、CSS がブリードアウトし、searhform cmp スタイルに影響します。
問題はShadow DOMに関するものであり、ChromeのみがShadow DOMをサポートし、他のものはそうではないことをオンラインで読んだことから私が理解したこと。webcomponents ポリフィルを使用しようとしました
<script src="../../../node_modules/webcomponents.js/webcomponents-hi-sd-ce.js"></script>index.html (正しい方法ではなかったかもしれません)。
コンポーネントにのみ明確なcssとアイコンを適用し、アプリの他の部分に影響を与えないようにするにはどうすればよいでしょうか?