为什么不包括我的 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

事实证明，样式表正在加载，但样式在属性选择器范围内的作用破坏了我的后代选择器。

例如，.messaging-panel .message-text 将变为 .messaging-panel[some_other_attr_id] .message-text[some_attr_id]。问题在于父选择器具有不同的范围属性，这打破了样式规则。

我的解决方案是在这些情况下删除父选择器。

更新：Madhu Ranjan 提供了更合适的。

Answer 2

Component styles normally apply only to the HTML in the component's own template.

Use the /deep/ selector to force a style down through the child component tree into all the child component views. The /deep/ selector works to any depth of nested components, and it applies to both the view children and content children of the component.

所以要从我们需要使用的主机中定位 DOM 中的所有子元素，

  :host /deep/ <selector>{}

例子Plunker.

了解更多信息 here。

为什么不包括我的 mdDialog 组件的 SCSS 文件？

Why isn't my mdDialog component's SCSS file being included?

sass

webpack

angular-material

mddialog

angular-cli