デフォルトでは、Angularは、Angularが自動的に作成する特別な属性セレクターを使用して、コンポーネントのCSS / SCSSをコンポーネントにスコープします。これは、コンポーネントスタイルがそのコンポーネントのビューのDOM要素にのみ影響することを意味します。言い換えると、コンポーネントのスタイルは、コンポーネントの子であるDOM要素にのみ影響します。
mat-selectCDKオーバーレイパッケージ（CDKポータル自体を使用していると思います）を使用してオーバーレイペインをレンダリングします。CDKオーバーレイパッケージは、mat-selectのオーバーレイペインをAngularアプリケーションのルートコンポーネント（ドキュメントに追加）の外側にレンダリングしますbody。これはmat-select、コンポーネントのテンプレート内にあり、mat-select要素がDOM内のコンポーネントの子要素であるにもかかわらず、mat-selectのオーバーレイペインがDOM内のコンポーネントの子要素ではないことを意味します。これは、コンポーネントのスタイルがオーバーレイペイン（またはコンポーネントの子ではない他の要素）に触れないことを意味します。
私は自分の前にこの問題に遭遇しました。個人的には、この動作はAngularのエミュレートされたcssスコープ機能のバグだと思います。ただし、Angularチームはこの問題を認識しており、実装の許容可能な制限と見なしています。Angularのメンテナの1人から、この問題をパフォーマンスの高い方法で修正する方法を現在知らないというコメントを見たのを覚えていると思います（したがって、これが変わることはないと思います）。同様に、ネイティブシャドウDOMカプセル化では、コンポーネントのCSSのみがコンポーネントの子に影響を与えるため、オーバーレイをレンダリングするときに同じ問題が発生します（パフォーマンス上の理由からも仕様がこの決定を下したと思います）。
これはすべて言われていますが、コンポーネントのcssファイルcssファイルにcssを配置し、それでも動作させるには2つの方法があります（cssを「グローバル」cssファイルに配置する必要はありません）。
@Component({encapsulation: ViewEncapsulation.None})オプションを使用して、コンポーネントのcssスコープを無効にします。これにより、コンポーネントのcssスコープが無効になり、コンポーネントのすべてのcssが「グローバル」になります。通常の「グローバル」cssとは異なり、コンポーネントのcssは、コンポーネントが作成/破棄されるときにDOMに追加および削除されます（したがって、コンポーネントのcssは、コンポーネントがDOMにある場合にのみ存在します）。
コンポーネントのcssスコープをViewEncapsulation.Emulated（デフォルト）に設定し、角度カスタム::ng-deep疑似セレクターを使用して、コンポーネントのcssファイル内の特定のcssスタイルからスコープを選択的に削除します。
例： ::ng-deep { .cdk-global-overlay-wrapper, .cdk-overlay-container { z-index: 9999!important; } }
::ng-deepセレクタは、角度に廃止されましたが、角度のチームは、セレクタを削除する現在の計画を持っており、彼らはまだ必要な場合は、当面、それを使用することを推奨します。ViewEncapsulation.NativeそしてViewEncapsulation.ShadowDomサポートしていない::ng-deepセレクタを（とセレクタを突き刺すためのあらゆるサポートを持っていません）。この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加