mdDialogコンポーネントのSCSSファイルが含まれていないのはなぜですか？

Question

は、私は、ユーザーにメッセージを提供するかなり基本的なAngular Material dialogコンポーネントがあります：私はインテリアツールバーのスタイルをしようとしている

... 

     let dialogRef = this.dialog.open(
      UserMessagingDialog, 
      { 
       data: { 
        'messages': this.messagesToShow, 
        'messageColors': this.messageColors, 
        'messageIcons': this.messageIcons 
       }, 
       hasBackdrop: false, 
       panelClass: 'messaging-panel' 
      } 
     ); 

     dialogRef.afterClosed().subscribe(result => { 
      // angular.element('messaging .messaging-icon').removeClass('rotate-cw tinted'); 
     }); 
    } 
} 

@Component({ 
    selector: 'user-messaging-dialog', 
    templateUrl: './user-messaging.dialog.html', 
    styleUrls: ['./user-messaging.component.scss'] 
}) 
export class UserMessagingDialog { 
    constructor(
     @Inject(MD_DIALOG_DATA) 

     public data: any, 
     public dialogRef: MdDialogRef<UserMessagingDialog> 
    ) { } 
} 

を、その上で見たように私は、親コンポーネントのSCSSファイルを用意しました。しかし、それは適用されていません。ビルドはWebpack/Angular-CLI経由です。

SCSSファイルは、プレーンCSSが含まれており、同じパスを使用してダイアログを呼び出すコンポーネントに適切に含まれています

.messaging-panel .message-text { 
    padding-top: 2px; 
    padding-left: 8px; 
    white-space: normal; 
} 
/* ... plus about 80 more lines */ 

私も自分のファイルにダイアログのスタイルを破壊し、直接注入しようとしましたコンポーネントはstyles経由でスタイルを設定します。

ダイアログにCSSファイルを受け入れるかどうか、そうであれば、どうして私のために機能しないのですか？

Answer 1

通常、コンポーネントスタイルは、コンポーネントの 独自のテンプレートのHTMLにのみ適用されます。

/deep/selectorを使用すると、子のコンポーネントビューに子の コンポーネントツリーを強制的にスタイルダウンさせることができます。/deep /セレクタ は、ネストされたコンポーネントの深さに関係なく動作し、コンポーネントのビューの子コンポーネントとコンテンツコンポーネントの両方に適用されます。私たちが使用する必要があるホストからDOMでその子要素のすべてを対象とする

、

:host /deep/ <selector>{} 

例Plunker。

詳しくはhereをご覧ください。

Answer 2

スタイルシートはロードされていましたが、スタイルは属性セレクタでスコープされており、子孫セレクタを壊しました。

たとえば、.messaging-panel .message-textは.messaging-panel[some_other_attr_id] .message-text[some_attr_id]になります。問題は、親セレクタが異なるスコープ属性を持ち、スタイル規則を破るということです。

私の解決策は、そのような場合に親セレクタを削除することでした。

更新：Madhu Ranjanがより適切なsolutionを提供しました。