1

我有一个相当基本的Angular Material 对话框组件，可以向用户传递消息：

...

        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 文件，如果接受，为什么它对我不起作用？

4

2 回答 2

1

事实证明，样式表正在加载，但是样式被属性选择器限定范围，这破坏了我的后代选择器。

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

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

更新：Madhu Ranjan 提供了更合适的解决方案。

于 2017-07-11T19:00:42.260 回答
1

组件样式通常仅适用于组件自己模板中的 HTML。

使用 /deep/ 选择器强制样式通过子组件树进入所有子组件视图。/deep/ 选择器适用于任何深度的嵌套组件，它适用于组件的视图子项和内容子项。

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

  :host /deep/ <selector>{}

示例Plunker。

在此处阅读更多相关信息。

于 2017-07-11T19:10:54.883 回答