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提供了更合适的solution。

Answer 2

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

使用/ deep / selector强制样式向下穿过子项   组件树到所有子组件视图中。 / deep /选择器   适用于任何深度的嵌套组件，它适用于两者   查看组件的子项和内容子项。

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

  :host /deep/ <selector>{}

示例Plunker。

详细了解here。

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

2 个答案: