我正在尝试将样式应用于子组件标记,但我做不到。
我有带 anchor 标记的子组件。
尽管我在父组件中为 anchor 标记设置了样式,但它并不适用。有什么解决方案?
工作代码: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;
}
最佳答案
是因为组件默认有 View 封装(shadow dom)。要禁用此行为,您可以利用 encapsulation
属性,如下所述:
import {Component, ViewEncapsulation} from '@angular/core';
import {TestApp} from 'testapp.component.ts';
@Component({
selector:'test-component',
styleUrls: ['test.component.css'],
templateUrl: './test.component.html',
directives:[TestApp],
encapsulation: ViewEncapsulation.None // <------
})
export class TestComponent{
}
关于css - 样式不适用于子组件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38798002/