mdDialogコンテナの幅をどのスコープのCSSセレクタで上書きできるのですか？

Question

最大幅80Vwが.mat-dialog-containerに設定されている典型的な角度材料ダイアログが表示されている場合、それを上書きするセレクタを作成するにはどうすればよいですか？本当の全角ダイアログが欲しいです。

問題はスコープです - Angular-CLIはコンポーネントCSSをスコープ属性セレクタでコンパイルします。

したがって、この：

.parent .child 

になる：

.parent[some_attr] .child[some_other_attr] 

しかし、この特定の要素は、任意の構成要素に取り付けられていないよう - それは、動的に生成された属性を持っていませんその上に。

私は、ダイアログスタイルシートなしの成功とホストコンポーネントのスタイルシートの両方でオーバーライドを試みたしました。

Angular special selectors

Dialog Plunkr

---

私はもう一度試してみましょう。私はこの問題を説明するうまくやっていません。

のは、私は私のホストコンポーネントのスタイルシートにこれを追加しましょう：私は、ビルドの時計を実行しているので、アプリが再コンパイルされる

.mat-dialog-container { 
    max-width: 100%; 
} 

。 CSSの出力は今、このです：

.mat-dialog-container[_ngcontent-c6] { 
    max-width: 100%; 
} 

しかし、その要素が実際にそれに属性_ngcontent-c6を持っていません。この属性は、祖先の兄弟の内側にある他の要素に適用されます（.mat-dialog-container）。セレクターは間違っています。

CSSをダイアログコンポーネントのスタイルシートに追加すると、同様のことが起こりますが、属性IDが異なります。

Answer 1

あなたは、本体タグにIDを追加することができますし、それはあなたがそれはあなたが少なくともplunkerで、現在のスタイルをオーバーライドします。この

<style> 
#bodyID .mat-dialog-container { 
    max-width:100vw; 
    background-color: blue; 
} 
</style> 

を使用することができ、これらのダイアログのすべてになりたい場合は供給される。

各ダイアログに特定のスタイルが必要な場合は、これを調べましたか？あなたが言及してきたように、それは完全に要素をマッチング停止するセレクタは、角度などによって書き換えられているため

how-to-style-child-components-from-parent-components-css-file

Answer 2

あなたは、身体のIDは必要ありません。

しかし、これは周りの唯一の方法は、あなたの手を投げ、コンポーネントスタイルシートのスコープを忘れて、ページスタイルシートにCSSルールを追加することです。もちろん、このルールは、コンポーネントを使用するすべてのページに追加する必要があります。コンポーネントは、コンポーネントの使用目的や使用者に応じて不条理であると見なすことができます。