angular - 来自父组件的CSS fi的样式子组件
我有一个父组件:
我想用子组件填充这个组:
父模板:
儿童模板:
由于child和parent是两个独立的组件,它们的风格被锁定在它们自己的范围内。
在我的父组件中,我尝试过:
.parent .child {
// Styles for child
}
但child样式未应用于parent组件。
我尝试使用child将parent的样式表包含到child组件中以解决范围问题:
// child.component.ts
styleUrls: [
'./parent.component.css',
'./child.component.css',
]
但这没有帮助,也尝试了另一种方式将child样式表提取到parent,但这也没有帮助。
那么如何设置包含在父组件中的子组件的样式?
11个解决方案
152 votes
更新 - 最新方式
如果可以避免的话,不要这样做。 正如Devon Sans在评论中指出的那样:这个功能很可能会被弃用。
更新 - 更新的方式
从Angular 4.3.0开始,所有穿孔的css组合器都被弃用了。 Angular团队推出了一个新的组合子encapsulation mode(仍处于实验水平,而不是完整和最终的方式),如下所示,
演示:[https://plnkr.co/edit/RBJIszu14o4svHLQt563?p=preview]
styles: [
`
:host { color: red; }
:host ::ng-deep parent {
color:blue;
}
:host ::ng-deep child{
color:orange;
}
:host ::ng-deep child.class1 {
color:yellow;
}
:host ::ng-deep child.class2{
color:pink;
}
`
],
template: `
Angular2 //red
//blue
//orange
//yellow
//pink
`
老路
您可以使用encapsulation mode和/或piercing CSS combinators >>>, /deep/ and ::shadow
工作实例:[http://plnkr.co/edit/1RBDGQ?p=preview]
styles: [
`
:host { color: red; }
:host >>> parent {
color:blue;
}
:host >>> child{
color:orange;
}
:host >>> child.class1 {
color:yellow;
}
:host >>> child.class2{
color:pink;
}
`
],
template: `