为什么不包括我的mdDialog组件的SCSS文件？
为什么不包括我的mdDialog组件的SCSS文件？
提问于 2017-07-11 16:29:57
我有一个相当基本的角质材料对话组件，它将消息传递给用户：
...
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/角-CLI。
SCSS文件包含普通CSS，并正确地包含在使用相同路径调用对话框的组件中：
.messaging-panel .message-text {
padding-top: 2px;
padding-left: 8px;
white-space: normal;
}
/* ... plus about 80 more lines */我还尝试将对话框样式分解为自己的文件，并通过组件上的styles直接注入样式。
对话框是否接受CSS文件，如果是，为什么它对我不起作用？
回答 2
Stack Overflow用户
回答已采纳
发布于 2017-07-11 19:10:54
Stack Overflow用户
发布于 2017-07-11 19:00:42
结果是，样式表正在加载，但样式的作用域是属性选择器，这种方式破坏了我的后代选择器。
例如，.messaging-panel .message-text将变成.messaging-panel[some_other_attr_id] .message-text[some_attr_id]。问题是父选择器有一个不同的范围属性，这破坏了样式规则。
我的解决方案是移除那些情况下的父选择器。
更新: Madhu提供了一个更合适的解决方案。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/45040039
复制相关文章
相似问题
腾讯云开发者
