我尝试将样式应用到子组件标记,但我不能这样做。
我有一个带锚标记的子组件。
即使我在父组件中为锚标签设置了样式,它也不适用。有什么解决方案吗?
工作代码:http://plnkr.co/edit/CJCpV4ZbG7hdxT2AeSmt?p=preview
<a href="https://www.google.com">Google</a>
在父组件中,我使用子组件并为该子组件应用样式。
HTML代码:
<div class="container">
<div class="test">
<testapp></testapp>
</div>
</div>
CSS代码:
.container{
font-family:sans-serif;
font-size:18px;
border: 1px solid black;
}
.test{
width:50%;
background-color:#f0f5f5;
}
.container:hover .test{
background-color:#e6ffe6;
}
.container:hover .test:hover{
background-color:#ffffe6;
}
.container .test a {
color: red ;
}
.container .test a:hover {
color:green;
}
5条答案
按热度按时间ao218c7q1#
这是因为默认情况下组件具有视图封装(shadow dom)。要禁用此行为,您可以利用
encapsulation
属性,如下所述:看看这个plunkr:http://plnkr.co/edit/qkhkfxPjgKus4WM9j9qg?p=preview。
w46czmvw2#
当使用styleUrls属性时,样式是一个组件的 * 本地 *,而不是其子组件的。所以我做了两个更改:1)将styleUrls移动到testapp组件。2)将div移动到testapp组件。
ndasle7k3#
编辑:这应该解决:
在css的子类中写下面的代码
parentclass是child的直接父类。childclass是应用于子组件的类。
6qqygrtg4#
只需将父组件样式添加到子组件样式url数组中,并确保您给予了父css url的正确路径。
请参阅下面的代码以供参考。
//在子组件@component中:
vsaztqbk5#
我已经解决了这样的问题,根据情况覆盖了不适用于
::ng-deep{}
或:host::ng-deep{}
的样式:或者