My Parent Component utilizes a Child Component. I have defined the necessary styles in the Parent CSS file, and these styles change appropriately when hovering over the div. However, the Child Component does not inherit the styling classes of the Parent Component.
I attempted to resolve this by using
encapsulation: ViewEncapsulation.NoneIs there an alternative method to achieve this?
Plunker example: http://plnkr.co/edit/gwcTi4QyZyFPtlgfY5Al?p=preview
Child Component:
import {Component} from '@angular/core';
@Component({
selector:'testapp',
template: `
<a href="https://www.google.com">Google</a>
`
})
export class TestApp{
}
Parent Component: Html code:
<div class="container">
<div class="test">
<testapp></testapp>
</div>
</div>
Parent Component: CSS code:
.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;
}